Given an HTML document and the task is to get the element where mouse pointer moves over. There are two approaches to solve this problem which are discussed below:
Approach 1:
- Get the x and y coordinates value by using .clientX and .clientY property.
- Use document.elementFromPoint(x, y) method to get the element content on that position when mouse pointer moves over.
Example 1: This example implements the above approach.
<!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>         var up = document.getElementById('GFG_UP');         var down = document.getElementById('GFG_DOWN');         up.innerHTML = "Hover over the document to know the element.";                   function GFG_Fun() {             var x = event.clientX;             var y = event.clientY;             el = document.elementFromPoint(x, y);             down.innerHTML = el.innerHTML;         }     </script> </body>   </html> |
Output:
- Before Hover on the button:
- After Hover on the button:
Approach 2:
- Attach the event ‘onmouseover’ to the element.
- Call the alert function with the id of that element, each time when event occurs.
Example 2: This example using the approach discussed above.
<!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:
- Before Hover on the button:
- After Hover on the button:
