Open In App

HTML onmouseout Event Attribute

Last Updated : 20 Dec, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

The HTML  onmouseout event attribute works when the mouse pointer moves out of the specified element. It activates when the mouse pointer moves out of an HTML element.

When a user moves the mouse away, this can be utilized to activate specific actions or functions and enables dynamic changes in response to mouse interactions, enhancing user experience.

Syntax:

<element onmouseout = "script">

Supported Tags:

It supports all HTML elements EXCEPT- 

Attribute value:

This attribute contains a single value script that works when the mouse moves out from the element. 

Example 1:

This example uses onmouseout event to display an alert message when the mouse moves out from the paragraph element. 

HTML




<!DOCTYPE html>
<html>
 
<body>
    <center>
        <h2>
            onmouseout Event Attribute
        </h2>
 
        <!-- onmouseout event call here -->
       
        <p onmouseout="geeks()">
            Computer science portal
        </p>
    </center>
 
    <script>
       
        /* Script run when onmouseout
                event call */
       
        function geeks() {
            alert("Mouse move out");
        }
    </script>
</body>
 
</html>


Output:

Output

Example 2:

This example uses the onmouseout event to change the color of the text to yellow and the background color to black.

HTML




<!DOCTYPE html>
<html>
 
<body>
    <script>
       
        /* Script run when onmouseout event call */
       
        function geeks() {
            document.getElementById('gfg').
                style.color = 'yellow'
            document.getElementById('gfg').
                style.backgroundColor = 'black'
        }
    </script>
    </head>
 
    <center>
        <h2>
            onmouseout Event Attribute
        </h2>
 
        <!-- onmouseout event call here -->
       
        <p id="gfg" onmouseout="geeks()">
            Computer science portal
        </p>
    </center>
</body>
 
</html>


Output:

Output

We have a list of  JavaScript onmouse events, to check those please go through the JavaScript onmouse events article.

Supported Browser:

  • Google Chrome 1 and above
  • Edge 12 and above
  • Firefox 6 and above
  • Opera 12.1 and above
  • Safari 1 and above

We have a Cheat Sheet on Javascript where we covered all the important topics of Javascript to check those please go through Javascript Cheat Sheet-A Basic guide to JavaScript.



Previous Article
Next Article

Similar Reads

HTML DOM onmouseout Event
The HTML DOM onmouseout event occurs when the mouse pointer is moved out of an element or its children. Supported Tags: It supports All HTML elements, EXCEPT: &lt;base&gt;&lt;bdo&gt;&lt;br&gt;&lt;head&gt;&lt;html&gt;&lt;iframe&gt;&lt;meta&gt;&lt;param&gt;&lt;script&gt;&lt;style&gt;&lt;title&gt; Syntax: In HTML: &lt;element onmouseout="myScript"&gt;
1 min read
How to Call a JavaScript Function from an onmouseout Event ?
The onmouseout event in JavaScript triggers when the mouse pointer leaves an element. This event is commonly used in web development to execute certain functions when a user moves the mouse away from a specific area on the webpage. Below are the approaches to call a JavaScript function from an onmouseout event: Table of Content Using inline event h
3 min read
HTML onsearch Event Attribute
This onsearch attribute works when a user presses the ENTER button or clicks on the x button. This event works with &lt;input&gt; element. Supported Tags: &lt;input type="search"&gt;Syntax: &lt;element onsearch="script"&gt;Attribute: This event contains single attribute script which contains the script to be run when event call. Example: C/C++ Code
1 min read
HTML oninput Event Attribute
This attribute works when it gets user input value. This attribute mainly fires when the user change the value of &lt;input&gt; and &lt;textarea&gt; element. This attribute is quite similar to onchange attribute but the basic difference is that the oninput event attribute occurs immediately when the value of the element changes while the onchange a
1 min read
HTML | onmouseup Event Attribute
This attribute fires when a mouse button is released over the element. The order of events occur related to the onmouseup event. onmousedownonmouseuponclick Supported Tags: All HTML elements, EXCEPT: &lt;base&gt; &lt;bdo&gt;&lt;br&gt;&lt;head&gt;&lt;html&gt;&lt;iframe&gt;&lt;meta&gt;&lt;param&gt;&lt;script&gt;&lt;style&gt; &lt;title&gt; Syntax:
1 min read
HTML | onwheel Event Attribute
This attribute works when the wheel of pointer device is rolled up or down over an element. The onwheel attribute also works when the user scrolls or zooms on an element by using mouse or touchpad. Supported Tags: It supports all HTML elements. Syntax: &lt;element onwheel = "script"&gt; Attribute Value: This attribute contains single value script a
1 min read
HTML | oncontextmenu Event Attribute
This attribute works when the user right-clicks on an element to open the context menu.Supported Tags: It supports all HTML elements. Syntax: &lt;element oncontextmenu="script"&gt; Attribute Value: This attribute contains single value script. The script to be run when oncontextmenu attribute called. It is supported by all HTML elements.Note: This a
1 min read
HTML | onfocus Event Attribute
This onfocus attribute works when the element gets focused. This event attribute is mostly used with &lt;input&gt;, &lt;select&gt;, &lt;a&gt; elements. This event attribute is supported by all HTML elements excepts &lt;base&gt;, &lt;bdo&gt;, &lt;br&gt;, &lt;head&gt;, &lt;html&gt;, &lt;iframe&gt;, &lt;meta&gt;, &lt;param&gt;, &lt;script&gt;, &lt;sty
1 min read
HTML | ononline Event Attribute
The ononline event attribute works when the browser starts working in online mode. it is opposite to onoffline event attribute.Supported Tags &lt;body&gt; syntax &lt;element ononline = "script"&gt; Attribute Value: This event attribute contains single value script which works when browser working in online mode.Example: C/C++ Code &lt;!DOCTYPE HTML
1 min read
HTML | ondragover Event Attribute
The ondragover event attribute will trigger if a draggable element or text is being dragged to a valid drop target. To drag an element garb that element and drag it to the drag point. Here we will use the global HTML 5 draggable attribute. The data and elements can't be dropped. To allow a drop, you have to call the event.preventDefault() method. I
2 min read