可點擊下方的div透明DIV

Question

是否有可能有一個絕對定位的，透明的div覆蓋了一系列的可點擊的div？我希望能夠將鼠標懸停在下面的紅色div上以獲得迴應。

<style type="text/css"> 

#holder{ 
    width:200px; 
    height:200px; 
} 
.clickMe { 
    width:100px; 
    height:100px; 
    cursor:pointer; 
    background-color:red; 
    border:1px solid black; 
    float:left; 
    margin:-1px; 
    padding:0; 
} 
.hidey { 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:50; 
    height:50%; 
    width:50%; 
    opacity:.25; 
    background-color:black; 
} 
</style> 
<div class="hidey"></div> 
<div id="holder"> 
    <div class="clickMe"></div> 
    <div class="clickMe"></div> 
    <div class="clickMe"></div> 
    <div class="clickMe"></div> 
</div> 

Answer 1

因爲頂格會消耗鼠標動作做你想做的（其中我知道）的唯一方法是使頂部的div採取一個onClick動作，然後做一個JavaScript函數傳遞點擊下面的div。

看到這個答案的詳細信息：

Trigger a button click with JavaScript on the Enter key in a text box

你的功能將更加複雜一些，因爲你需要獲得鼠標位置以及並用它來決定哪個箱子你點擊。

見第二個答案這裏是如何做到這一點。

How do I get the absolute position of a mouse click from an onClick event on the body?

編輯：對不起，你說懸停，不要點擊。製作這個onHover動作，並傳遞一個懸停動作，而不是點擊。儘管同樣的概念。

Answer 2

讓我提出的簡單的老派方法，而不是去任何長度，使這項工作。

而不是具有圍繞內部元件的單個包裝的現有結構，只是給單個元素的包裝，並把該事件對這些包裝找到子元素。

I.E.而不是這樣的：

<div class="wrapper"> 
    <div class="clickMe"> 
     ... 
    </div> 
    <div class="clickMe"> 
     ... 
    </div> 
</div> 

使用此：

<div class="wrapper"> 
    <div class="clickMe"> 
     ... 
    </div> 
</div> 
<div class="wrapper"> 
    <div class="clickMe"> 
     ... 
    </div> 
</div> 

你必須在你的HTML一些額外的標記，但在我看來，這可能是最好的長度，你需要去使當前的標記起作用。僅僅因爲新技術的存在，並不意味着它是最好的工具。

Answer 3

Pointer-events可以解決你的問題。目前Firefox 3.6+，Safari 4和Google Chrome支持指針事件（請參閱compatibility table）。