How to Determine which Element the Mouse Pointer Move Over using JavaScript? Last Updated : 12 Jul, 2025 Summarize Comments Improve Suggest changes Share Like Article 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 ContentUsing clientX and clientY propertiesUsing onmouseover propertyApproach 1: Using clientX and clientY propertiesGet 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 propertyAttach 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: Comment More infoAdvertise with us Next Article How to Scroll to an Element Inside a Div using JavaScript? P PranchalKatiyar Follow Improve Article Tags : JavaScript Web Technologies Similar Reads How to move mouse pointer to a specific position using JavaScript ? In this article, we will learn how to move the mouse pointer to any specific position in the web browser using JavaScript. Before we start, you need to know that it's not actually possible to move the mouse pointer to a position using JavaScript, such functionality can be easily misused, but we can 3 min read How to identify which element scroll is being used using JavaScript ? To identify which element is being scrolled using JavaScript, you can attach scroll event listeners to specific elements. This allows you to determine which element's scroll event is active, enabling tailored responses or interactions based on the particular element being scrolled.Using Scroll event 3 min read How to Change Background Color of a Div on Mouse Move Over using JavaScript ? The background color of the div box can be easily changed using HTML, CSS, and Javascript. We will use the querySelector() and addEventListener() methods to select the element and then apply some math logic to change its background color. The below sections will guide you on how to create the effect 2 min read How to Get and Set Scroll Position of an Element using JavaScript ? In this article, we will learn how to get and set the scroll position of an HTML element using JavaScript.Approach: We will be using the HTML DOM querySelector() and addEventListener() methods and the HTML DOM innerHTML, scrollTop and scrollLeft properties.We create an HTML div element with an id of 3 min read How to Scroll to an Element Inside a Div using JavaScript? To scroll to an element within a div using JavaScript, set the parent div's scrollTop`to the target element's offsetTop. This method allows smooth navigation within a scrollable container. Below are the methods to scroll to an element inside a Div using JavaScript:Table of Content Using scrollIntoVi 3 min read How to Set Cursor Position in Content-Editable Element using JavaScript? To set the cursor position in content-editable elements, such as a div tag, you can use the JavaScript Range interface. A range is created using the document.createRange() method.Approach:First, create a Range and set the position using the above syntax.Get user input from the input tag using jQuery 3 min read Like