jQuery Api Event MouseOver() & MouseOut

Event jQuery mouseover() and mouseout – how to use mouseover and mouseout event with html elements. We are going to show you with simple example how to use mouseover and out event.

jQuery mouseover()

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.
Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *