How to determine which element the mouse pointer move over using JavaScript ?
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:
Please Login to comment...