In this article we will explain how to use mouseover() method in jquery or  how to attach mouseover event to a html element.


jQuery mouseover event is occurred when you move your mouse cursor over the selected element .Once the mouseover event is occurred, it executes the mouseover() method or attach a function to run.

Note: Most of the programmer are confused between mouseenter and mouseover.

Difference between mouseenter() and mouseover()

jQuery mouseenter event is only triggered if the mouse pointer enters the selected element whereas the mouseover event triggers if the mouse cursor enters any child elements as well as the selected element.



jQuery mousedown() example

Let's take an example to see the mouseover() event in jQuery. In this example, when user move mouse cursor over the “h1” element then “h1” background color will be change.

 <!DOCTYPE html>
<html xmlns="">
    <title>Jquery Tutorials</title>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
            $(document).ready(function () {
                $("#h1").mouseover(function () {
                    $(this).css("background-color", "orange");
    <h1 id="h1">Move your cursor over this heading</h1>        



How to use jQuery mouseover() event

I hope it will help to you after reading it.

 Let's check live example

Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like