的mouseenter /鼠標離開忽略覆蓋元件

看來，的mouseenter/鼠標離開方法是觸發不僅當鼠標的座標進入目標的客戶端的矩形，而且當另一元件揭開或覆蓋靶。這是一個問題，因爲在我的mouseenter回調中，我想在目標頂部顯示另一個元素E.我也希望E消失mouseleave。您可以將其視爲重疊的工具提示。的mouseenter /鼠標離開忽略覆蓋元件

但是，當我將鼠標移動到目標上時，會觸發mouseenter並且元素E將覆蓋它。這個覆蓋範圍還會觸發一個事件，所以E會消失。這進一步觸發了一個mouseenter事件，所以E會再次出現.....這是一件非常頭疼的事情。

所以基本上，我想知道是否存在的mouseenter/鼠標離開只關心鼠標是否進入或離開目標的客戶端矩形，不管目標是否被覆蓋或不是一個版本。

更新：@arunopjohny創建了一個JS小提琴來說明這個問題。看評論

來源

2014-02-27 user690421

您可以將重疊元素放置爲目標的後代，以便mouseenter/mouseleave事件不會被觸發 –

問題是目標是內聯的，而E是塊級別。把E作爲目標的後裔將驅動瀏覽器瘋狂.. @ArunPJohny – user690421

是否http://jsfiddle.net/arunpjohny/9fNcY/1/顯示你的問題 –

在一個相關的問題找到完美的解決方案：Ignore mouse interaction on overlay image

「指針的事件：無;」屬性將禁用該元素的任何鼠標事件。更重要的是，該事件將反過來「通過」下面的元素。在我的問題的覆蓋元素E上使用這個解決了這個問題。

來源

2014-02-27 06:16:45 user690421

嘗試

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(); 
    }); 
});

演示：Fiddle

來源

2014-02-27 03:39:04

這解決了目標和E具有完全相同的位置和大小時的問題。但是，如果E比目標大，那麼當您將鼠標移出目標時，它不會消失。 – user690421

@ user690421可以幫助您在小提琴中重新創建問題 –

@ user690421請參閱http://jsfiddle.net/arunpjohny/9fNcY/3/ –

的mouseenter /鼠標離開忽略覆蓋元件

回答

相關問題