Change HTML Element Width On Hover Using JQuery

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

Check Demo

Video Tutorial

Watch video tutorial on how to Change HTML Element Width On Hover Using JQuery.