jQuery mouseover() and mouseout event method; In this tutorial, you will learn how to use mouseover and mouseout event with html elements.
mouseover and mouseout event in jquery
- Mouseover event
- Mouseout event
Mouseover event
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
$(selector).mouseover()
This triggers the jQuery mouseover event for selected elements.
$(selector).mouseover(function)
Parameters of MouseOver Event
- Function :- this is an optional parameter. This work the mouseover event is triggered.
Example 1 of jQuery mouseover() event
Let’s see an example 1 of mouseover() event.
<!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>
Distinct 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.
jQuery mouseOut()
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
$(selector).mouseout()
This triggers the jQuery mouseOut event for selected elements.
$(selector).mouseout(function)
Parameters of mouseOut Event
Function :- This is an optional parameter. This is work when the mouseOut event is triggered.
Example 1 of jQuery mouseOut() event
Let’s see an example 1 of mouseOut() event.
<!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>
Distinct 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.
Recommended jQuery Tutorials
- jQuery | Event MouseUp () By Example
- Event jQuery Mouseleave By Example
- jQuery Event Mouseenter Example
- keyup jquery event example
- Jquery Click() Event Method with E.g.
- Event jQuery. Blur By Example
- jQuery form submit event with example
- keydown function jQuery
- List of jQuery Events Handling Methods with examples
- Jquery Selector by .class | name | #id | Elements
- How to Get the Current Page URL in jQuery
- jQuery Ajax Get() Method Example
- get radio button checked value jquery by id, name, class
- jQuery Set & Get innerWidth & innerHeight Of Html Elements
- jQuery Get Data Text, Id, Attribute Value By Example
- Set data attribute value jquery
- select multiple class in jquery
- How to Remove Attribute Of Html Elements In jQuery
- How to Checked Unchecked Checkbox Using jQuery
- jQuery removeClass & addClass On Button Click By E.g.
