jQuery .hover() event
Syntax and Description
.hover(handlerIn, handlerOut)
handlerIn is a function to execute when the mouse pointer enters the element.
handlerOut is a function to execute when the mouse pointer leaves the element.
Return value is the jQuery object, for chaining purposes.
jQuery .hover binds two handlers,
to be executed when the mouse pointer enters and leaves the elements.
$obj.hover(handlerIn, handlerOut) is shorthand for:
$obj.mouseenter(handlerIn);
$obj.mouseleave(handlerOut);
Hover action
The following code adds hover action to a b tag.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from ww w .ja v a2s . c o m-->
$("b").hover(function () {
$(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
}, function () {
var cssObj = {
'background-color' : '#ddd',
'font-weight' : '',
'color' : 'red'
}
$(this).css(cssObj);
});
});
</script>
</head>
<body>
<body>
<b>java 2s.com</b>
</body>
</html>
Hover to add and remove class
The following code listens to the hover event and adds/removes class for the target element. In this way we can change the color for mouse in and out event.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from ww w.j ava 2 s. com-->
$("div").hover(
function () {
$(this).addClass("my");
},
function () {
$(this).removeClass("my");
}
);
});
</script>
<style>
.my { color:blue; }
</style>
</head>
<body>
<body>
<div>java 2s.com</div>
</body>
</html>
Hover to hide tag
The following code uses hover action to add marker tag and hide the marker tag for mouse out.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- ww w .j a v a 2 s .co m-->
$("div").hover(
function () {
$(this).append($("<span> ***</span>"));
},
function () {
$(this).find("span:last").remove();
}
);
});
</script>
</head>
<body>
<body>
<div><h1>j ava 2s.com</h1></div>
</body>
</html>
Hover to fade in and out
The following code add fade in and out animation for hover event.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from ww w . j av a 2s . c o m-->
$("div").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
});
</script>
</head>
<body>
<body>
<div><h1>java2s.c o m</h1></div>
</body>
</html>
Hover event for List
The following code adds hover event to a li element. It adds a marker tag for li element when mouse in.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from www. j a va 2 s .c o m-->
$("li").hover(
function () {
$(this).append($("<span>*</span>"));
},
function () {
$(this).find("span:last").remove();
}
);
});
</script>
</head>
<body>
<body>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</body>
</html>