1

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

3 回答 3

5

指针事件可以解决您的问题。到目前为止，Firefox 3.6+、Safari 4 和 Google Chrome 都支持指针事件（参见兼容性表）。

于 2012-05-19T08:22:49.100 回答
1

因为顶部 div 将消耗鼠标操作，所以做你想做的事情的唯一方法（我知道）是让顶部 div 执行 onClick 操作，然后创建一个 javascript 函数将该点击传递给下面的 div。

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

在文本框中的 Enter 键上使用 JavaScript 触发按钮单击

您的功能将涉及更多，因为您还需要获取鼠标位置并使用它来决定您正在单击哪个框。

请参阅此处的第二个答案以了解如何执行此操作。

如何从主体上的 onClick 事件中获取鼠标单击的绝对位置？

编辑：对不起，你说的是悬停，而不是点击。进行 onHover 动作，并传递悬停动作，而不是单击。相同的一般想法。

于 2012-05-19T07:39:46.890 回答
0

让我建议简单的老派方法，而不是竭尽全力完成这项工作。

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

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

于 2012-05-19T07:42:13.237 回答