jQuery event.relatedTarget Property
Last Updated :
18 Nov, 2022
The jQuery event.relatedTarget is an inbuilt property that is used to find which element is being entered or gets exit on mouse movement.
Syntax:
event.relatedTarget
Parameter: It does not accept any parameter because it is a property not a function.
Example 1: This example shows the working of event.relatedTarget property.
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ script >
< script >
$(document).ready(function () {
$("div, p").mouseenter(function (event) {
$("#d2").html("Pointer at : "
+ event.relatedTarget.nodeName);
});
});
</ script >
< style >
#d1 {
height: 100px;
width: 50%;
padding: 10px;
border: 2px solid green;
}
#d2 {
height: 20px;
width: 50%;
padding: 10px;
margin-top: 10px;
border: 2px solid green;
}
</ style >
</ head >
< body >
< div id = "d1" >
< div >This is a div element </ div >
< p style = "background-color:lightgreen" >
This is a paragraph
</ p >
</ div >
< div id = "d2" ></ div >
</ body >
</ html >
|
Output:
Example 2: In this example, a pop-up will show when the mouse exit from an element.
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ script >
< script >
$(document).ready(function () {
$("div, p").mouseenter(function (event) {
$(this).animate({ fontSize: "+=14px"});
});
$("div, p").mouseleave(function (event) {
$(this).animate({ fontSize: "-=14px"});
alert("Pointer at : "
+ event.relatedTarget.nodeName);
});
});
</ script >
< style >
#d1, #d2 {
background-color: lightgreen;
height: 30px;
width: 50%;
padding: 10px;
margin-top: 10px;
border: 2px solid green;
}
</ style >
</ head >
< body >
< div id = "d1" >
Geeksforgeeks
</ div >
< p id = "d2" >
A computer science portal
</ p >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...