javascript
  1. javascript-mouseout
PreviousNext

JavaScript mouseout

The mouseout event in JavaScript is triggered when the user moves the mouse cursor out of the selected element. It is often used to perform an action when the user moves the mouse away from an element.

Syntax

element.addEventListener('mouseout', function);
  • element: The selected HTML element to which the event listener is added.
  • function: The function to be executed when the mouseout event is triggered.

Example

<!DOCTYPE html>
<html>
<head>
    <title>Mouseout Example</title>
</head>
<body>
    <h1 id="heading">Move your mouse cursor out of this heading</h1>

    <script>
        // Select the heading element
        var heading = document.getElementById('heading');

        // Add an event listener for the mouseout event
        heading.addEventListener('mouseout', function() {
            heading.style.color = 'red';
            heading.innerHTML = 'Mouse out detected!';
        });
    </script>
</body>
</html>

Output

When the user moves the mouse cursor out of the heading element, the text color changes to red and the text "Mouse out detected!" is displayed.

Explanation

In the example above, we have selected the heading element using document.getElementById() method and added an event listener for the mouseout event using the addEventListener() method.

The function inside the event listener changes the color of the heading to red and updates the inner HTML of the heading with the text "Mouse out detected!".

Use

The mouseout event is commonly used in web development to perform various actions when the user moves the mouse cursor out of an element. It can be used to change the appearance of an element, hide a tooltip, or perform any other action that needs to be executed when the user moves the mouse cursor out of an element.

Important Points

  • The mouseout event is triggered when the user moves the mouse cursor out of the selected element.
  • The mouseout event can be added using the addEventListener() method with the mouseout event type.
  • The mouseout event is commonly used in web development to perform various actions when the user moves the mouse cursor out of an element.

Summary

The mouseout event in JavaScript is used to execute a function when the user moves the mouse cursor out of a selected HTML element. It is commonly used in web development to perform various actions, like changing the appearance of an element, hiding a tooltip, or performing any other action that needs to be executed when the user moves the mouse cursor out of the element.

mouseovermouseenter
Published on: