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. Fiddle: /

Expected behaviour: mouseover events fire on both divs.

Actual behaviour: mouseover event fires only on the top div.

How can I make the mouseover event bubble to the bottom 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;
}

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. Fiddle: http://jsfiddle/vbkjL/1/

Expected behaviour: mouseover events fire on both divs.

Actual behaviour: mouseover event fires only on the top div.

How can I make the mouseover event bubble to the bottom 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;
}

• javascript
• css

• future visitors: Also make sure you don't have any box-shadows or anything like that on children that makes parent to be triggered on parts that are not overlapping children. – aderchox Commented May 30, 2022 at 10:31

1 Answer 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.