hover()
method
jQuery hover() function fires when the mouse pointer enters
and leaves the selected HTML element so we can say that The hover() method
specifies two functions to run when the mouse pointer hovers over the selected
elements.This method triggers both the mouseenter and mouseleave events. The
hover( over, out ) method simulates hovering (moving the mouse on, and off, an
object).
Syntax
|
$(selector).hover(inFunction,outFunction)
|
Example:-
|
<!doctype html>
<html lang="en">
<head>
<meta
charset="utf-8">
<title>hover Example</title>
<style>
ul {
margin-left: 20px;
color: blue;
}
li {
cursor: default;
}
span {
color: red;
}
</style>
<script
src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<ul>
<li>option 1</li>
<li>Option 2</li>
<li
class="fade">Item 3</li>
<li
class="fade">Item 4</li>
</ul>
<script>
$( "li" ).hover(
function() {
$( this ).append( $( "<span>
***</span>" ) );
}, function() {
$( this ).find(
"span:last" ).remove();
}
);
$( "li.fade" ).hover(function() {
$( this ).fadeOut( 100 );
$( this ).fadeIn( 500 );
});
</script>
</body>
</html>
|
