不可見的元素不會收到鼠標事件

我正在jQuery中寫一個樣本選取器，用於指定座位套的顏色。選擇器由一系列縮略圖組成，當用戶將鼠標懸停在這些縮略圖上時，頂部會顯示一個更大的圖像。不可見的元素不會收到鼠標事件

現在的事情是，客戶想要部分或完全被上面的大圖遮住的圖像仍然對事件做出響應。

我對這個問題的解決方案是添加一個預覽元素來顯示更大的圖片到z-index爲5的列表中。然後，我會克隆樣本列表中的原始元素集，並將它們覆蓋爲不可見z-索引爲10的元素。結果是部分模糊的元素似乎仍然響應鼠標事件，但實際上底層元素沒有附加事件。事件實際上附加在預覽元素前面的不可見元素（我希望這很有道理！）。

我第一次嘗試實現這種效果是爲了讓克隆的元素獲得可見性：隱藏的CSS樣式，但這些元素不響應鼠標事件。我嘗試過使用帶背景的空元素：透明，而這看起來很好，但在IE9測試顯示這些元素也不響應鼠標事件！

如果我從疊加元素中刪除背景：透明樣式，bot當然可以隱藏下面的所有東西。

它似乎只是IE9有這個問題到目前爲止。 IE8似乎觸發了透明項目上的事件。它也似乎在FireFox和Chrome中按預期工作。

來源

2011-09-19 GordonM

如果你看不到東西，你怎麼用鼠標對它做些什麼？ –

元素用於捕捉爲它們背後的可見元素而設的事件。這是一個難以解釋的問題（至少沒有圖解），但是當我將覆蓋層放在色板的頂部時，色板不會接收鼠標事件，因爲覆蓋層覆蓋了它們。不可見元素代表覆蓋元素覆蓋的樣本元素捕獲鼠標事件。 – GordonM

最終的解決方案令人煩惱地簡單。所有需要的是給不可見的元素以下樣式：

background-color: white; 
opacity: 0; 
filter: alpha(opacity=0); /* for old IE versions */

這使元素不可見，但仍然響應鼠標事件。

來源

2011-09-20 07:25:31 GordonM

我會對此使用雙重綁定技術，其中鼠標懸停被綁定到後面的圖像，並且輸出綁定到正面圖像。這可以讓你隱藏前面的圖像，直到後面的圖像被徘徊。

// use $.fn.each so that each thumb gets its own timer. 
$(".thumb-behind").each(function(){ 
    var timer; 
    $(this).hover(function(){ 
    $(this).next().stop(true,true).fadeIn(); 
    },function(){ 
    timer = setTimeout(function(){ 
     $(this).next().stop(true,true).fadeOut(); 
    },10); 
    }); 

    $(this).next().hover(function(){ 
    clearTimeout(timer); 
    },function(){ 
    $(this).stop(true,true).fadeOut(); 
    }); 
});

只是確保您修改$（this）.next（）以選擇與當前縮略圖相關的較大縮略圖。

來源

2011-09-19 15:41:19

我必須記住那個未來，但幸運的是我找到了一個更簡單的解決方案，我將在下面發佈。 – GordonM

不可見的元素不會收到鼠標事件

回答

相關問題