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

Last Updated : 12 Jul, 2025

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

Using clientX and clientY properties
Using onmouseover property

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:

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:

How to identify which element scroll is being used using JavaScript ?

PranchalKatiyar

Improve

Article Tags :

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

Approach 1: Using clientX and clientY properties

Approach 2: Using onmouseover property

Similar Reads

Thank You!

What kind of Experience do you want to share?