How to use mouseover() Method Event in JQuery

This article describe about mouseover() Method Event in jQuery.
  • 2466

The mouseover() Method Event in jQuery

When mouse pointer over on the selected element then mouseover event occur.

And used togather with the mouseout event.

The mouseover() method triggers the mouseover event, it is also define what will happens when mouseover event occurs.

Note: The mouseover event triggers if a mouse pointer enters any child elements as well as the selected element. Unlike the mouseenter event.


<!DOCTYPE html>



<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $("p").mouseover(function () {

            $("p").css("background-color", "Red");


        $("p").mouseout(function () {

            $("p").css("background-color", "Gray");






<p style="background-color:Gray">The mouse pointer over this paragraph hover.</p>






mouseover method pic53.jpg


Trigger the mouseover Event

Generate trigger of mouseover event for selected element.





Bind a Function to the mouseover Event

It is define a function to run when mouseover event trigger for selected element.






You may also want to read these related articles Click here

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here


More Articles

© 2020 DotNetHeaven. All rights reserved.