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:
Article Tags :
Recommended Articles