MouseEnter-/mouseleave ignorierend Abdeckelementes

Question

Es scheint, dass die MouseEnter-/mouseleave Methode ist nicht nur auslösen, wenn die Maus der Koordinaten des Client Rechtecken des Ziels eindringt, sondern auch, wenn ein weiteres Element, Aufdecken oder das Ziel abzudecken. Das ist ein Problem, weil ich in meinem mouseenter Rückruf ein anderes Element E auf dem Ziel anzeigen möchte. Ich möchte auch E auf mouseleave verschwinden. Sie können sich das als einen überlappenden Tooltip vorstellen. Wenn ich meine Maus auf das Ziel bewege, wird mouseenter gefeuert und Element E wird es abdecken. Diese Abdeckung löst ein Ereignis mouseleave aus, so dass E verschwindet. Dies löst weiterhin ein mouseenter Ereignis, so dass E wieder erscheinen wird ..... Was ziemlich Kopfschmerzen ist.

Also im Grunde, ich frage mich, ob es eine Version von MouseEnter- ist/mouseleave, die etwa nur darum, ob die Maus betritt oder verlässt die Client-Rechtecke des Ziels, unabhängig davon, ob das Ziel abgedeckt ist oder nicht.

update: @arunopjohny erstellt eine JS Geige, um dieses Problem zu veranschaulichen. Siehe Kommentare

Answer 1

Gefunden perfekte Lösung in einer relevanten Frage: Ignore mouse interaction on overlay image

Die "Zeiger-Ereignisse: none;" Eigenschaft deaktiviert jedes Mausereignis des Elements. Noch wichtiger ist, dass das Ereignis stattdessen zu dem Element darunter "durchläuft". Die Verwendung dieses Elements auf dem Überlagerungselement E in meiner Frage löst das Problem.

Answer 2

Versuchen

jQuery(function ($) { 
    $('#target').hover(function() { 
     var $target = $(this); 
     clearTimeout($target.data('hoverTimer')); 
     $('#e').show(); 
    }, function() { 
     var $target = $(this); 
     var timer = setTimeout(function() { 
      $('#e').hide(); 
     }, 200); 
     $target.data('hoverTimer', timer); 
    }); 

    $('#e').hover(function() { 
     clearTimeout($('#target').data('hoverTimer')); 
    }, function() { 
     $(this).hide(); 
    }); 
}); 

Demo: Fiddle