Skip to content
Related Articles

Related Articles

Improve Article
HTML | DOM onmouseover event
  • Last Updated : 30 Jul, 2019

The DOM onmouseover event in HTML occurs when the mouse pointer is moved onto an element or its children.

Syntax:

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

Example:




<!DOCTYPE html>
<html>
  
<head>
    <title>
      DOM onmouseover event
  </title>
</head>
  
<body>
    <center>
  
        <h1 id="hID">
          GeeksforGeeks
      </h1>
        <h2>
          HTML DOM onmouseover 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 onmouseover event are listed below:

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



My Personal Notes arrow_drop_up
Recommended Articles
Page :