Description: Bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.
.hover( handlerIn(eventObject), handlerOut(eventObject) )
version added: 1.0
handlerIn(eventObject)
A function to execute when the mouse pointer enters the element.
handlerOut(eventObject)
A function to execute when the mouse pointer leaves the element.
The .hover() method binds handlers for both mouseenter and mouseleave events. We can use it to simply apply behavior to an element during the time the mouse is within the element.
Calling $(selector).hover(handlerIn, handlerOut) is shorthand for:
$(selector).mouseenter(handlerIn).mouseleave(handlerOut);
See the discussions for .mouseenter() and .mouseleave() for more details.
Examples
Example 1
To add a special style to list items that are being hovered over, try:
Example 1 - Full source:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("li").hover(
function () {
$(this).append($("<span> ***</span>"));
},
function () {
$(this).find("span:last").remove();
}
);
//li with fade class
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
});
</script>
<style>
ul { margin-left:20px; color:blue; }
li { cursor:default; }
span { color:red; }
</style>
</head>
<body>
<ul>
<li>Milk</li>
<li>Bread</li>
<li class='fade'>Chips</li>
<li class='fade'>Socks</li>
</ul>
</body>
</html>
Example 2
To add a special style to table cells that are being hovered over, try:
The output of the code above will be:
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
Example 2 - Full source:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
});
</script>
<style type="text/css">
.hover { color:blue; background-color:silver; }
</style>
</head>
<body>
<table>
<tr>
<td>Toyota</td>
<td>Fiat</td>
<td>Honda</td>
</tr>
</table>
</body>
</html>
Example 3
To unbind the above example use:Example 3 - Full source:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
});
function unbind()
{
$("td").unbind('mouseenter mouseleave');
}
</script>
<style type="text/css">
.hover { color:blue; background-color:silver; }
</style>
</head>
<body>
<table>
<tr>
<td>Toyota</td>
<td>Fiat</td>
<td>Honda</td>
</tr>
</table>
<input type="button" value="Click here to unbind"
onclick="unbind()" />
</body>
</html>
Description: Bind a single handler to the matched elements, to be executed when the mouse pointer enters or leaves the elements.
.hover( handlerInOut(eventObject) )
version added: 1.4
handlerInOut(eventObject)
A function to execute when the mouse pointer enters or leaves the element.
The .hover() method, when passed a single function, will execute that handler for both mouseenter and mouseleave events. This allows the user to use jQuery's various toggle methods within the handler.
Calling $(selector).hover(handlerInOut) is shorthand for:
$(selector).bind("mouseenter mouseleave",handlerInOut);
See the discussions for .mouseenter() and .mouseleave() for more details.
Example
Slide the next sibling LI up or down on hover, and toggle a class.
$("li")
.filter(":odd")
.hide()
.end()
.filter(":even")
.hover(
function () {
$(this).toggleClass("active")
.next().stop(true, true).slideToggle();
}
);
Example - Full source:
<!DOCTYPE html>
<html>
<head>
<style>
ul { margin-left:20px; color:blue; }
li { cursor:default; }
li.active { background:black;color:white; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("li")
.filter(":odd")
.hide()
.end()
.filter(":even")
.hover(
function () {
$(this).toggleClass("active")
.next().stop(true, true).slideToggle();
}
);
});
</script>
</head>
<body>
<ul>
<li>Milk</li>
<li>White</li>
<li>Carrots</li>
<li>Orange</li>
<li>Broccoli</li>
<li>Green</li>
</ul>
</body>
</html>
Was this information helpful?
