Question

使用jQuery 2.1，Meyer的2.0 CSS reset script，针对IE9 +和现代浏览器。

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

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

实际行为：mouseover事件仅在顶部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最后开火。

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

Answer 2

你可以得到帮助。

Demo

<强> HTML

<div class="container"><a href="#" class="NewPost">Click To Show bubble</a>
  <div class="bubble">
Sub div or some thext here
  </div>
</div>

<强> CSS

.container {
    float:left;
    width:180px;
    height:25px;
    background-color:#f1f4f9;
    border-radius:2px;
    -webkit-border-radius:2px;
    -o-border-radius:2px;
    -moz-border-radius:2px;
    margin-left:4px;
    margin-top:4px;
    text-align:center;
    border:1px solid #e7e8ec;
    }
.container a {
    color:#545454;
    font-family:'lucida grande',tahoma,verdana,arial,sans-serif;
    text-decoration:none;
    font-size:11px;
    line-height:25px;
    }
.NewPost {
  position:relative;
}
.bubble 
{
position: relative;
width: 450px;
height: 100px;
padding: 5px;
background: #f1f4f9;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: #e7e8ec solid 1px;
margin-top:10px;
display: none;
}

.bubble::after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 9px 8px;
border-color: #f1f4f9 transparent;
display: block;
width: 0;
z-index: 1;
top: -8px;
left: 31px;
}

.bubble:before 
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 9px 8px;
border-color: #e7e8ec transparent;
display: block;
width: 0;
z-index: 0;
top: -9px;
left: 31px;
}

#content {
    width: 435px; 
    height: 80px;
    border: solid 1px #d8dbdf;
    font-size: 14px;
    box-shadow: inset 0px 0px 10px 0 #dddddd;
    }

<强> Jquery的

$('html').click(function() {
   $('.bubble').hide(); 
});

$('.container').click(function(event){
     event.stopPropagation();
});

$('.NewPost').click(function(event){
     $('.bubble').toggle();
});

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

2 个答案:

事件捕获

事件冒泡