jQuery將div懸停在另一個圖層下

是否有可能忽略所有使用jQuery將懸停在它們上面的元素「上方」的div？例如，我有一個元素A，其中綁定了一個懸停事件，但其他元素B，C，D在元素A上方「絕對定位」。因此，當用戶的鼠標移動到元素B，C時， D，即使B，C和D直接在元素上方，懸停事件也不會被觸發。是否可以忽略元素B C和D？jQuery將div懸停在另一個圖層下

更新： 我實際上試圖創建一個地圖（元素A）與元素B，C，D作爲區域標籤。舉例來說，對於紐約州的地圖，您將具有與地圖重疊的文本元素「曼哈頓」，「新澤西州」等。這就是爲什麼即使用戶將鼠標懸停在標籤上也需要懸停的原因。

來源

2011-03-06 peter

這是證明你的問題？ http://jsfiddle.net/userdude/BqZ3R/ – 2011-03-06 20:51:38

我現在想到的唯一解決方案就是在頂部創建一個不可見的元素並給它一個懸停觸發器。

來源

2011-03-06 20:33:24 Ivar

我看到它的方式，你有幾種選擇：

做的Ivarska建議，並創造了所有的人一個空元素，並利用它來進行觸發。
綁定到整個頁面上的鼠標移動並發現它是「盒子內」（即在目標元素上） - 基本上，重新創建懸停事件。（但不是這增加了一些相當嚴重的開銷到您的網頁）
重新設計

您可能也能結合到剛剛目標（即A），你有可能重疊的任何元素，那麼就檢查另一個控件內的鼠標位置是否會假設也在A控件中。比綁定頁面和檢查更少的開銷，但仍比典型的更多。

來源

2011-03-06 20:39:12

@Brad Christie - 在這種情況下沒有辦法使用事件冒泡？還是我誤解事件冒泡？ http://www.quirksmode.org/js/events_order.html – 2011-03-06 21:06:54

@JaredFarrish：最頂級的總是優先：http://jsfiddle.net/taJtM/（在任何懸停） – 2011-03-06 21:40:36

@Brad - 所以你的意思是觸發最高級的事件，並且不會下推到子元素事件？ – 2011-03-06 21:43:12

如果您可以使用CSS3，那麼您可以爲絕對定位元素設置pointer-events:none，請參閱demo here。

All modern browsers支持此屬性 - 只有IE9及以下版本和Opera Mini不支持它（在撰寫本文時）。這也意味着你不會有那些可能不是你想要的元素的任何指針事件。

來源

2011-03-06 20:48:58 andyb

我非常喜歡這種方法，當我們說小文本的大按鈕，並且希望點擊按鈕的任何部分時可以觸發懸停和點擊事件時，它非常有用。如果你將文字懸停，結果就好像沒有任何文字一樣，太棒了！ – aesede 2014-01-21 21:01:56

太棒了。 – 2016-04-10 03:54:22

千謝！ – ReaperSoon 2017-11-20 21:37:02

您可以使A元素的Z索引高於B，C和D元素的Z索引。

來源

2011-03-06 21:04:16

雖然有不同的方法來解決這個問題，可能是最簡單的將是懸停事件添加到所有的元素：

HTML

<div id="a" class="hover"></div> 
<div id="b" class="hover"></div> 
<div id="c" class="hover"></div> 
<div id="d" class="hover"></div> 
<div id="state">unhovered</div>

CSS

#a { 
    width: 350px; 
    height: 300px; 
    border: 1px solid #000; 
    background-color: #ccc; 
} 
#b { 
    position: absolute; 
    top: 35px; 
    left: 35px; 
    width: 35px; 
    height: 30px; 
    border: 1px solid #000; 
    background-color: #cca; 
} 
#c { 
    position: absolute; 
    top: 85px; 
    left: 85px; 
    width: 35px; 
    height: 30px; 
    border: 1px solid #000; 
    background-color: #cca; 
} 
#d { 
    position: absolute; 
    top: 85px; 
    left: 135px; 
    width: 35px; 
    height: 30px; 
    border: 1px solid #000; 
    background-color: #cca; 
}

jQuery

$(document).ready(function(){ 
    $('.hover').hover(
     function(){ 
      $('#state').text('hovered'); 
     }, 
     function(){ 
      $('#state').text('unhovered'); 
     } 
    ); 
});

這裏舉例：http://jsfiddle.net/userdude/H5TAG/

來源

2011-03-06 21:25:54

使用e.relatedTarget，以確定用戶懸停在您嵌套（絕對）的元素之一。也許更容易，如果你給你的地圖標註類

例如：要在地圖上懸停狀態中顯示你的標籤，當用戶離開地圖

$("#map").hover(
     function(e) { 
     $(this).find(".labels").fadeIn(); 
     }, 

     function(e) { 
     if($(e.relatedTarget).hasClass("maplabel")) { 
      //The user has hovered over a label...Do nothing (or some other function) 
     } else { 
      // User has left the map and isn't over a label 
      $(this).find(".labels").fadeOut(); 
     } 
    );

來源

2012-10-23 09:13:21 SteveP

的z-index的調整隻是隱藏起來別人提到的作品。爲要通過懸停進行識別的項目設置較高的z-index。

來源

2013-12-10 15:22:52 echo

這隻適用於定位元素。 – user3670743 2015-10-28 17:32:37

jQuery將div懸停在另一個圖層下

回答

相關問題