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>
|
