jQuery event.relatedTarget Property
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> <!--jQuery code to show working of this property--> <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> <!-- this is outer div element --> <div id="d1"> <!-- this is inner div element --> <div>This is a div element </div> <!-- this is paragraph element --> <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> <!--jQuery code to show working of this property--> <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:
Please Login to comment...