Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

HTML | DOM onmouseout Event

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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

 


My Personal Notes arrow_drop_up
Last Updated : 04 Aug, 2021
Like Article
Save Article
Similar Reads
Related Tutorials