jQuery event.relatedTarget

What You’ll Learn

event.relatedTarget is an Element property naming the other element in a pointer transition — where the mouse is going on mouseout, or where it came from on mouseover. This tutorial covers the official anchor demo, dropdown menus, direction logging, highlight effects, and comparing with target and currentTarget.

Introduction

When the pointer moves between elements, the browser fires mouseover and mouseout events. Each event involves two elements: the one receiving the event and the one on the other side of the transition. jQuery exposes the second element as event.relatedTarget.

Unlike coordinate properties, relatedTarget returns a DOM Element — you can read nodeName, wrap it in jQuery, or test whether the pointer moved into a child menu. jQuery has forwarded it since version 1.1.4.

Understanding event.relatedTarget

This property answers one question: which other element is involved in this pointer transition?

• mouseout — relatedTarget is the element the pointer is entering.
• mouseover — relatedTarget is the element the pointer is leaving.
• Read-only — an Element reference; not a method.
• May be null — when the pointer enters or leaves the document window.

📝 Syntax

Official jQuery API form (since 1.1.4):

event.relatedTarget

// typical pattern:
$( "a" ).on( "mouseout", function ( event ) {
  if ( event.relatedTarget ) {
    console.log( event.relatedTarget.nodeName );
  }
});

Parameters

• None — relatedTarget is a property, not a function.

Return value

• Element — the other DOM element involved in the event, or null when the pointer crosses the document boundary.

Official jQuery API example

$( "a" ).on( "mouseout", function ( event ) {
  alert( event.relatedTarget.nodeName ); // "DIV"
});

Examples Gallery

Example 1 follows the official jQuery mouseout demo. Examples 2–5 cover dropdown menus, direction logging, highlight effects, and a four-way target comparison.

$( "a" ).on( "mouseout", function ( event ) {
  if ( event.relatedTarget ) {
    $( "#log" ).text( "relatedTarget: " + event.relatedTarget.nodeName );
  }
});

Move from link to sibling DIV:
#log shows "relatedTarget: DIV"

var $menu = $( "#menu" );

$( "#trigger" ).on( "mouseout", function ( event ) {
  var rt = event.relatedTarget;
  if ( rt && $.contains( $menu[0], rt ) ) {
    return; // still inside menu subtree
  }
  $menu.hide();
});

Move trigger → panel: menu stays open
Move trigger → outside: menu hides

$( "#zone" ).on( "mouseover mouseout", function ( event ) {
  var rt = event.relatedTarget;
  var dir = event.type === "mouseover" ? "from" : "to";
  var name = rt ? rt.nodeName : "(outside document)";
  $( "#log" ).text( event.type + " — relatedTarget " + dir + ": " + name );
});

mouseover — relatedTarget from: DIV
mouseout — relatedTarget to: SPAN

$( ".card" ).on( "mouseout", function ( event ) {
  var rt = event.relatedTarget;
  if ( !rt ) return;
  var $related = $( rt ).closest( ".card" );
  if ( $related.length ) {
    $related.addClass( "flash" );
    setTimeout( function () { $related.removeClass( "flash" ); }, 400 );
  }
});

Move between cards — destination card gets .flash for 400ms

$( "#panel" ).on( "mouseout", "a", function ( event ) {
  var rt = event.relatedTarget;
  $( "#log" ).html(
    "target: " + event.target.nodeName + "
" +
    "currentTarget: " + event.currentTarget.nodeName + "
" +
    "relatedTarget: " + ( rt ? rt.nodeName : "null" )
  );
});

target: A (deepest element)
currentTarget: A (matched selector)
relatedTarget: DIV (entering element)

🚀 Common Use Cases

• Dropdown menus — avoid closing when relatedTarget is inside the menu panel.
• Tooltip grace period — detect pointer moving from trigger into tooltip content.
• Drag hover zones — know which drop target the pointer entered on mouseout.
• Nested hover states — distinguish leaving a parent vs moving to a child.
• Focus rings / previews — highlight the element the user is moving toward.
• Debugging delegation — log transitions alongside target and delegateTarget.

📝 Notes

• Available since jQuery 1.1.4 — returns an Element (DOM node).
• Read-only property on mouseover and mouseout.
• On mouseout, points to the element being entered; on mouseover, the element being left.
• May be null when the pointer leaves the document — guard before use.
• mouseenter / mouseleave do not expose relatedTarget the same way — use mouseover/mouseout or $.contains().
• Not the same as target — relatedTarget is always the other element in the move.

💡 Best Practices