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

Pointer-events可以解决您的问题。到目前为止，Firefox 3.6 +，Safari 4和Google Chrome都支持指针事件（请参阅compatibility table）。

Answer 2

因为顶部div将使用鼠标操作，所以做你想要的（我知道的）的唯一方法是让顶部div采取onClick动作，然后使用javascript函数将该点击传递给在下面划分。

有关详细信息，请参阅此答案：

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 3

让我建议简单的旧学校方法，而不是任何长度来完成这项工作。

不是在内部元素周围使用单个包装器的当前结构，只需为各个元素提供一个包装器，并将事件放在这些包装器上以查找子元素。

即。而不是这个：

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

透明div下方的可点击div

3 个答案: