MouseOver 不会在重叠的 div 上冒泡吗？

Question

使用 jQuery 2.1，Meyer 的 2.0 CSS重置脚本，针对 IE9+ 和现代浏览器。

我制作了两个重叠的 div。我在听mouseover和mouseout事件对他们两个。小提琴：http : //jsfiddle.net/vbkjL/1/

预期行为：鼠标悬停事件在两个 div 上触发。

实际行为：鼠标悬停事件仅在顶部 div 上触发。

如何使鼠标悬停事件气泡到底部 div？

HTML

<div id="container">
    <div id="top"></div>
    <div id="below"></div>
</div>

jQuery

 $("#top")
     .mouseover(function () {
     console.log("top");
 })
     .mouseout(function () {
     console.log("top out");
 });

 $("#below")
     .mouseover(function () {
     console.log("bottom");
 })
     .mouseout(function () {
     console.log("bottom out");
 });

CSS

#top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    border: 1px red solid;
}
#below {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    border: 1px blue solid;
}

Answer 1

如果你想mouseover上#below到触发器#top的一个，做#below的孩子#top。

<div id="container">
    <div id="top">
        <div id="below"></div>
    </div>
</div>

在您当前的 HTML 中，两个 div 之间没有冒泡或捕获的关系，因为它们不是嵌套的。

冒泡/来自Quirksmode 的提醒：

事件捕捉

使用事件捕获时

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

element1 的事件处理程序首先触发，element2 的事件处理程序最后触发。

事件冒泡

当你使用事件冒泡时

               / \
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

element2 的事件处理程序首先触发，element1 的事件处理程序最后触发。

这是一个演示，如果我误解了你，请告诉我。