Employing jQuery 2.1 along with Meyer's 2.0 CSS reset script, specifically targeting IE9+ and modern browsers.
In this scenario, I have created two divs that are overlapping. I have set up event listeners for both the mouseover and mouseout events on these divs. You can view the demonstration here: http://jsfiddle.net/vbkjL/1/
The desired outcome is to have mouseover events trigger on both divs simultaneously
However, what actually happens is that the mouseover event only triggers on the top div.
I am seeking guidance on how to ensure that the mouseover event propagates to the bottom div as well.
Here is the HTML structure:
<div id="container">
<div id="top"></div>
<div id="below"></div>
</div>
jQuery Code:
$("#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 Styles:
#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;
}