透明的Div元素无法响应事件

Question

我有一个包含四个 div 方块的网格，第五个方块位于它们的中心并覆盖在上面：

fiddle http://jsfiddle.net/TLFJh/

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上一样。

- Jakub M.

---

你可以大大简化你的代码到这里。 - Eric

你需要支持哪些浏览器？ - thirtydot

Answer 1

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

- Molecular Man

Answer 2

你是否正在寻找jQuery事件.mouseenter()？

http://api.jquery.com/mouseenter

这将在绑定父元素的子 DIV 中保持透明度。

- fin

---

"info" div 不是有颜色的 div 的子元素。 - Igor Dymov

我需要 mouseover() 因为我需要跟踪指针的位置。 - Jakub M.

@Jakub：如果您只关心位置，为什么不将一个div覆盖在其他所有div上方呢？ - Eric

@Eric：我已经更新了描述。我需要光标下当前div的位置和信息。 - Jakub M.

Answer 3

请看这里。我使用了Eric简化的HTML，添加了jquery.hoverIntent并添加了几个事件，以便您可以看到悬停事件的触发。 我参考了这里的hoverIntent插件。

- Chris Marais

---

我更新了你的代码，http://jsfiddle.net/B9ccB/4/ 这更符合我的要求（对于inn1），我的意图是当光标同时悬停在“inn”和“info”上时，没有“out”事件。 - Jakub M.

它不是提供更好的示例吗？http://jsfiddle.net/oceog/2UjqR/6/？我理解如果鼠标靠近info div的中心（相交边界），需要在debug中更改文本，是的-它没有。 - zb'

Answer 4

难道不能计算鼠标悬停在哪个div上吗？然后你只需要创建一个覆盖层div，并通过事件计算目标div与鼠标位置。

- Frog

---

在实际页面中，我会有数十个不太规则的div，它们都是浮动的，并且大小是用百分比指定的。所以很遗憾，不行 :( - Jakub M.

使用JavaScript的计算样式不是可以实现这个吗？ - Frog