jquery
  1. jquery-mouseout
PreviousNext

jQuery mouseout()

The jQuery mouseout() function is used to attach an event handler function to a specified element. The function is triggered when the mouse pointer moves out of the specified element.

Syntax

The basic syntax for using mouseout() is as follows:

$(selector).mouseout(function);

Where selector is the element to which you want to attach the event handler function, and function is the name of the function or the function itself that you want to execute when the event is triggered.

Use

The mouseout() function is commonly used in web development to handle mouse cursor events. It can be used to show and hide content, change styles, or trigger other actions when the mouse pointer moves out of an element.

Example

In this example, we use mouseout() to change the background color of a button when the mouse pointer moves out of the button:

<!DOCTYPE html>
<html>
<head>
    <!-- Include jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<button>Click Me</button>

<script>
    $(document).ready(function(){
        $("button").mouseout(function(){
            $(this).css("background-color", "#3596A0");
        });
    });
</script>

</body>
</html>
Try Playground

In this example, the mouseout() function is used to change the background color of the button element to white when the mouse pointer moves out of the button.

Summary

mouseout() is a jQuery event handler function that is used to execute a function when the mouse pointer moves out of an element. It is useful for handling mouse cursor events and can be used to trigger a wide range of actions, including showing and hiding content, changing styles, and triggering other events.

mouseover()load()
Published on: