HTML視覺zOrder vs鼠標zOrder

任何人都知道如何讓zOrder對視覺和鼠標事件的工作方式不同？HTML視覺zOrder vs鼠標zOrder

我有一個<div>元素，我在zOrder中放置較高的元素，它稍微透明以突出顯示某些東西，但它干擾了原始元素上的:hover css樣式。

我需要使<div>對鼠標不可見，或讓它的鼠標zOrder不同於它的可視化zOrder。這將在HTML中，從來沒有聽說過會允許這個，任何人聽到任何東西？

我想我爲什麼會需要這樣的樣本，但它會是這樣的不知道：

 
<style> 
#a1:hover { 
    background-color: red; 
} 
#c1 { 
    position: absolute; 
    z-index: 10; 
    width: 100px; 
    height: 100px; 
    opacity: 0.3; 
    background-color: green; 
} 
</style> 
<div id="a1"> 
    <span id="b1">Sample</span> 
</div> 
    <div id="c1">&nbsp;</div>

上述樣本可能只起到的問題複雜化，但在div＃C1以更高的z順序位於其餘元素上，並具有透明的綠色。

我想div#a1:hover CSS樣式還是有效果時，鼠標在A1，在上述示例中的div#c1也是在相同的位置，因此它接收:hover效果（如果有一個）。我想有div#c1具有不同的小鼠z順序，使得（發生引起a1:hover）鼠標事件「穿過」到下面的元件

來源

2011-06-23 Clint Priest

我建議你發佈一些示例代碼，否則這個問題有可能被關閉。 – Kev

[I需要]使<div>不可見鼠標

您可以使用pointer-events: none。

它的作品「無處不在」（Chrome， Firefox，Safari），除了互聯網資源管理器（和Opera，如果有的話）。

http://jsfiddle.net/QC5Yw/

在可能的情況下，對於pointer-events瀏覽器的支持是不行的，你必須使用JavaScript。

來源

2011-06-24 03:08:22 thirtydot

謝謝，這是完美的！ –

HTML視覺zOrder vs鼠標zOrder

回答

相關問題