Open In App

How to Determine which Element the Mouse Pointer Move Over using JavaScript?

Last Updated : 12 Jul, 2025
Comments
Improve
Suggest changes
2 Likes
Like
Report

Given an HTML document and the task is to get the element where the mouse pointer moves over.

Below are the approaches to Determining which Element the Mouse Pointer moves over using JavaScript:

Table of Content

Approach 1: Using clientX and clientY properties

  • Get the x and y coordinates value by using .clientX and .clientY properties.
  • Use document.elementFromPoint(x, y) method to get the element content on that position when the mouse pointer moves over.

Example 1: This example implements the above approach.

html 
<!DOCTYPE HTML>
<html>

<head>
    <title>
        How to determine which element the mouse
        pointer move over using JavaScript ?
    </title>
</head>

<body style="text-align:center;">

    <h1 style="color:green;" onmouseover="GFG_Fun()">
        GeeksForGeeks
    </h1>

    <p id="GFG_UP" onmouseover="GFG_Fun()"
        style="font-size: 15px; font-weight: bold;">
    </p>

    <button onmouseover="GFG_Fun()">
        click here
    </button>

    <p id="GFG_DOWN" style="font-size: 24px; font-weight: bold; color: green;">
    </p>

    <script>
        let up = document.getElementById('GFG_UP');
        let down = document.getElementById('GFG_DOWN');
        up.innerHTML = "Hover over the document to know the element.";

        function GFG_Fun() {
            let x = event.clientX;
            let y = event.clientY;
            el = document.elementFromPoint(x, y);
            down.innerHTML = el.innerHTML;
        } 
    </script>
</body>

</html>

Output:

output

Approach 2: Using onmouseover property

  • Attach the event 'onmouseover' to the element.
  • Call the alert function with the id of that element, each time when event occurs.

Example: This example using the approach discussed above.

html 
<!DOCTYPE HTML>
<html>

<head>
    <title>
        How to determine which element the mouse
        pointer move over using JavaScript ?
    </title>
</head>

<body style="text-align:center;">

    <h1 id="h1" style="color:green;" onmouseover="alert(this.id)">
        GeeksForGeeks
    </h1>

    <p id="p" onmouseover="alert(this.id)"
        style="font-size: 15px; font-weight: bold;">
        Hover over the document to know the element.
    </p>

    <button id="button" onmouseover="alert(this.id)">
        click here
    </button>
</body>

</html>

Output:

output

P

PranchalKatiyar
Improve
Article Tags :

Explore

Lightbox