jQuery relatedTarget: Track the Movements In or Out of Elements

jQuery relatedTarget: Main Tips

• The event.relatedTarget property tracks cursor movements to determine when an element is being entered or exited.
• This property is related to jQuery mouse events.
• The jQuery relatedTarget property returns the element being entered/exited as the cursor moves.

Usage of event.relatedTarget

By tracking the cursor movements across a page, the event.relatedTarget property specifies which element is entered or exited. The results depend on whether it is a mouseover (exiting element) or a mouseout (entering element) event.

$("div, p").mouseenter((event) => {
   $("#message").html("Related target is: " + event.relatedTarget.nodeName);
});

The example above reveals the usage of event.relatedTarget. Moving your cursor around and causing jQuery mouse events, you will see that the related target will be indicated.