jQuery MouseOver() & MouseOut Event Method

jQuery MouseOver() & MouseOut Event Method

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

  1. jQuery | Event MouseUp () By Example
  2. Event jQuery Mouseleave By Example
  3. jQuery Event Mouseenter Example
  4. keyup jquery event example
  5. Jquery Click() Event Method with E.g.
  6. Event jQuery. Blur By Example
  7. jQuery form submit event with example
  8. keydown function jQuery
  9. List of jQuery Events Handling Methods with examples
  10. Jquery Selector by .class | name | #id | Elements
  11. How to Get the Current Page URL in jQuery
  12. jQuery Ajax Get() Method Example
  13. get radio button checked value jquery by id, name, class
  14. jQuery Set & Get innerWidth & innerHeight Of Html Elements
  15. jQuery Get Data Text, Id, Attribute Value By Example
  16. Set data attribute value jquery
  17. select multiple class in jquery
  18. How to Remove Attribute Of Html Elements In jQuery
  19. How to Checked Unchecked Checkbox Using jQuery
  20. jQuery removeClass & addClass On Button Click By E.g.

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

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