Open In App

HTML DOM onmouseover event

Improve
Improve
Like Article
Like
Save
Share
Report

The DOM onmouseover event in HTML occurs when the mouse pointer is moved onto 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 onmouseover="myScript">
  • In JavaScript: 
object.onmouseover = function(){myScript};
  • In JavaScript, using the addEventListener() method: 
object.addEventListener("mouseover", myScript);

Example: In this example, we will see the use of DOM onmouseover event.

HTML




<!DOCTYPE html>
<html>
   
<head>
    <title>
        DOM onmouseover event
    </title>
</head>
 
<body>
    <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>
</body>
 
</html>


Output: 

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

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


Last Updated : 15 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads