Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM onmouseout Event

  • Last Updated : 04 Aug, 2021

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:

  • <base>
  • <bdo>
  • <br>
  • <head>
  • <html>
  • <iframe>
  • <meta>
  • <param>
  • <script>
  • <style>
  • <title>

Syntax: 
 

  • In HTML: 
     
<element onmouseout="myScript">
  • In JavaScript: 
     
object.onmouseout = function(){myScript};
  • In JavaScript, using the addEventListener() method: 
     
object.addEventListener("mouseout", myScript);

Example: Using the addEventListener() method 
 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>DOM onmouseout Event</title>
</head>
 
<body>
    <center>
 
        <h1 id="hID">
          GeeksforGeeks
      </h1>
      <h2>DOM onmouseout Event</h2>
 
        <script>
            document.getElementById(
                "hID").addEventListener(
                "mouseover", over);
 
            document.getElementById(
                "hID").addEventListener(
                "mouseout", out);
 
            function over() {
                document.getElementById(
                    "hID").style.color = "green";
            }
 
            function out() {
                document.getElementById(
                    "hID").style.color = "black";
            }
        </script>
    </center>
</body>
 
</html>

Output: 
 



Supported Browsers: The browsers supported by HTML DOM onmouseout event are listed below: 
 

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Apple Safari
  • Opera

 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :