jQuery Mouseover & MouseOut Event Method; Through this tutorial, i am going to show you how to use jQuery mouseover and MouseOut event method with HTML elements.
jQuery Mouseover Event Method
The jQuery mouseover event occurs when mouse cursor pointer over on the selected HTML elements that time triggred mouseover event.
In other words, when the mouse cursor pointer over the selected html elements. At that time mouseover event triggered.
Syntax jQuery Mouseover Event Method
$(selector).mouseover()
This triggers the jQuery mouseover event for selected elements.
$(selector).mouseover(function)
Parameters of jQuery Mouseover Event Method
- Function :- this is an optional parameter. This work the mouseover event is triggered.
Example 1 – jQuery Mouseover Event Method
See the mouseOver event method example; as shown below:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mouseover event</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#first").mouseover(function(){
$("#first").css("background-color", "yellow");
});
$("#first").mouseout(function(){
$("#first").css("background-color", "blue");
});
});
</script>
</head>
<body>
<p id="first">Move the mouse pointer here !</p>
</body>
</html>
jQuery mouseOut() Event Method
The jQuery mouseOut event occurs when mouse cursor pointer remove the selected HTML elements that time triggred mouseOut event.
In other words, when the mouse cursor pointer remove the selected elements, at the time while the mouseOut event triggerd.
Syntax jQuery mouseOut() Event Method
$(selector).mouseout()
This triggers the jQuery mouseOut event for selected elements.
$(selector).mouseout(function)
Parameters of jQuery mouseOut() Event Method
Function :- This is an optional parameter. This is work when the mouseOut event is triggered.
Example 1 – jQuery mouseOut() Event Method
See the mouseOut event method example; as shown below:
<!DOCTYPE html>
<html>
<head>
<title>jQuery MouseOut Event</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#second").mouseover(function(){
$("#second").css("background-color", "grey");
});
$("#second").mouseout(function(){
$("#second").css("background-color", "blue");
});
});
</script>
</head>
<body>
<p id="second">Move the mouse pointer here !</p>
</body>
</html>
Difference between mouseleave and mouseout
- Mouseleave :- The jQuery mouseleave event is only triggered if the mouse pointer leaves the selected element
- Mouseout :- The jQuery mouseout event triggers if the mouse cursor leaves any child elements as well as the selected element.
Difference between mouseenter() and mouseover()
- Mouseenter :- The mouseenter event is only triggered if the mouse pointer enters the selected element
- Mouseover :- The mouseover event triggers if the mouse cursor enters any child elements as well as the selected element.