Skip to content
Related Articles
Open in App
Not now

Related Articles

HTML onmouseout Event Attribute

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 07 Dec, 2022
Improve Article
Save Article

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

Syntax:

<element onmouseout = "script">

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

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

HTML




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

Output:

 

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

Javascript




<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>

Output:

 

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

Supported Tags: This attribute is supported by all HTML elements except <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>. 

Supported Browser: The browser supported by onmouseout Event Attribute are listed below:

  • Google Chrome 1
  • Edge 12
  • Internet Explorer 9
  • Safari 1
  • Firefox 6
  • Opera 12.1

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.


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!