In this tutorial we will see how to Change HTML Element Width On Hover Using JQuery. Jquery method .animate() is used for this purpose.
Table of Contents
HTML Code
HTML Code is given below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change HTML Element Width On Hover Using JQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div class='main' onmouseover="widthIncrease()" onmouseout="widthDecrease()"></div>
</body>
</html>
CSS Code
CSS Code is given below.
.main{
width: 400px;
height: 200px;
background:#22438C;
}
JQuery Code
JQuery Code is given below, In this code we have used .animate() method to increase the width of div element.
<script>
var width = $(".main").width();
function widthIncrease()
{
$(".main").animate({
width: "1000"
});
}
function widthDecrease()
{
$(".main").animate({
width: "400"
});
}
</script>
Demo
Video Tutorial
Watch video tutorial on how to Change HTML Element Width On Hover Using JQuery.