透明DIV下方点击的div(Clickable divs beneath transparent d

是否有可能有一个绝对定位的，透明的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:

指针事件能够解决您的问题。 指针事件在Firefox 3.6及更高版本都支持，Safari浏览器4和谷歌Chrome到目前为止（参见兼容性表 ）。

Answer 2:

因为顶格会消耗鼠标动作做你想做的（其中我知道）的唯一方法是使顶格采取的onClick动作，然后做一个javascript函数该点击传递给div的下方。

看到这个答案的详细信息：

触发一个按钮，点击使用JavaScript上的Enter键文本框中

你的功能将更加复杂一些，因为你需要获得鼠标位置以及并用它来决定哪个箱子你点击。

看到第二个答案这里是如何做到这一点。

我如何从身体上onClick事件鼠标点击的绝对位置？

编辑：对不起，你说悬停，不要点击。 作出这样的onHover选项行动，并通过而不是点击一个悬停动作。 虽然同样的总体思路。

Answer 3:

让我提出的简单的老派方法，而不是去任何长度，使这项工作。

而不是围绕内部元件的单个包装的现有结构，只是给单个元素的包装，并把该事件对这些包装找到子元素。

IE浏览器，而不是这样的：

<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一些额外的标记，但在我看来，这可能是最好，你需要去使当前的标记工作长度。 正因为新技术存在，并不意味着它是这个职位的最佳工具。

文章来源: Clickable divs beneath transparent div