jQuery hover() Method
jQuery hover() method bind one or two handlers, and it will run when the mouse pointer enters and leaves the selected elements.
This method triggers both the mouseenter() and mouseleave() events.
Syntax
This triggers the hover event on the selected elements.
$(selector).hover(handlerIn, handlerOut);
| Parameter | Type | Description |
|---|---|---|
| handlerIn | Function | Required. Specifies the function to execute when the mouseenter event is occurs. |
| handlerOut | Function | Optional. Specifies the function to execute when the mouseleave event is occurs. |
Examples
This example represents the hover() event.
<!DOCTYPE html>
<html>
<head>
<title>jQuery hover() method</title>
<script src="jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
$("div").hover(function(){
$(this).css("background-color", "pink");
}, function(){
$(this).css("background-color", "white");
});
});
</script>
</head>
<body>
<p>Click on following text field to occur hover events.</p>
<div style="padding:15px 10px;">
Name: <input type="text" name="name" />
</div>
<div style="padding:15px 10px;">
E-mail: <input type="text" name="email" />
</div>
<div style="padding:15px 10px;">
Phone: <input type="text" name="phone" />
</div>
</body>
</html>