Question

我在网格中有四个div正方形，第五个正方形覆盖它们，位于中心：

HTML：

<div class="wrapper">
    <div id="info">info</div>
    <div id="inn1"></div>
    <div id="inn2"></div>
    <div id="inn3"></div>
    <div id="inn4"></div>
</div>

CSS：

div.wrapper {
    position: relative;
    width:200px;
    height:200px;
}

#inn1, #inn2, #inn3, #inn4 {
    width:100px;
    height:100px;
    float:left;
}
#inn1 { background: blue; }
#inn2 { background: red; }
#inn3 { background: green; }
#inn4 { background: yellow; }

#info {
    position:absolute;
    width:100px;
    height:100px;
    top:50px;
    left:50px;
    border: 1px solid black;
    box-sizing: border-box;
}

使用jQuery，我想将mouseover()事件绑定到四个方块（简单），但是我希望它们能够捕获事件，即使指针位于 info 框上（对于事件来说，盒子是“透明的”。）是否可能？

修改：

目标是我显示一些信息弹出窗口，指针后面的每个#inn都有不同的信息，当光标超过info时，也会显示弹出窗口，但是已超过inn。

Answer 1

唯一想到的是比较鼠标的位置和块的位置。这是fiddle。

Answer 2

jQuery事件.mouseenter（）是您要找的吗？

http://api.jquery.com/mouseenter

这将在绑定父级的子DIVS中保持透明度。

Answer 3

看看here。我使用了Eric的简化html，添加了jquery.hoverIntent并添加了一些事件，因此您可以看到被触发的悬停事件。我得到了hoverIntent插件here以供参考。

Answer 4

是否有可能计算出鼠标悬停的div？然后，您可以创建一个叠加div并使用事件中的鼠标位置计算目标div。

Div对事件透明

4 个答案: