In this article we will explain how to use mouseout() method in jquery or  how to attach mouseout event to a html element or how to execute a function when user remove mouse from html element.


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

Note: Most of the programmers are confused between mouseout and mouseleave.

Difference between mouseleave and mouseout

The mouseleave event is only triggered if the mouse pointer leaves the selected element whereas the mouseout event triggers if the mouse cursor leaves any child elements as well as the selected element.



jQuery mouseout() example

Let's take an example to see the mouseout() event in jQuery.

In the above code when user try to leave the mouse from the “h1” element then change “h1” background color.

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



How to attach mouse out event to a html element in jQuery

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