jQuery hover() Event

This event occurs on mouse hover over the element. This event has two handlers or functions. The first function will be executed when the mouse cursor enters the selected element, and the second is fired when the cursor leaves.

Syntax of hover() event

$(selector).hover(enter, leave)

The selector is the element on which hover event trigger. The enter function is called when the mouse cursor enters the selected element and leave function is called when mouse leaves the element.

Example

<style>
.box{
  width: 200px; 
  height: 150px; 
  border: 2px solid black; 
  padding: 10px; 
} 
</style>

<div class="box">Hover over me</div> 

<script>
function hoverin() {
$(this).css({"background-color":"#ffffe0"});
}
function hoverout() {
$(this).css({"background-color":"blue"});
}
$(document).ready(function(){ 
$("div.box").hover( hoverin, hoverout);  
});  
</script>

Output of the above code

Hover over me

In the above example, the background color of the div box changes on hover over the box.

Example

<p>Hover over Rabbit!</p>
<img src="images/rabbit.jpg" alt"jQuery hover method" style="width: 200px !important;" id="rabbit"/>

<script>
$('img#rabbit').hover(
function() {
	$(this).animate({
	"width": 400,
	}, {
	"duration": 500,
	"easing": "linear"
	});
},
function(){
	$(this).animate({
	"width": 200,
	}, {
	"duration": 500,
	"easing": "linear"
	});
});
})(jQuery);
</script>

Output of the above code

Hover over Rabbit!