MouseOver Doesn't Bubble On Overlapping Divs?

Using jQuery 2.1, Meyer's 2.0 CSS reset script, targeting IE9+ and modern browsers. I've made two overlapping divs. I'm listening to mouseover and mouseout events on both of them.

Solution 1:

If you want the mouseover on #below to trigger #top's one, make #below a child of #top.

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

In your current HTML, there's no relation of bubbling nor capturing between your two divs, as they're not nested.

A reminder of bubbling / from Quirksmode:

Event capturing

When you use event capturing

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

the event handler of element1 fires first, the event handler of element2 fires last.

Event bubbling

When you use event bubbling

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

the event handler of element2 fires first, the event handler of element1 fires last.

Here's a demo, let me know if I misunderstood you.

Solution 2:

You can get help looking at it.

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();
});