I am facing an issue while creating a webpage with overlapping background and content divs. The hover event works properly on the div with the class "content," but not on the div with the class "background." There is no interference with the event in the JavaScript code.
.container {
height: 100%;
width: 100%;
opacity: 1;
}
.background {
height: 100%;
width: 100%;
position: absolute;
}
.content {
height: 100%;
width: 100%;
position: absolute;
}<div class="container">
<div class="background" onmouseover="test(this)">
</div>
<div class="content">
<!-- PANELS -->
<div class="facePanel" onmouseover="hoveringFacePanel(this)" onmouseleave="hoveringFacePanelOff(this)">
<img class="imageShown" src="https://i.pinimg.com/736x/70/d4/22/70d422d5972596f603a94c0faf24a43d--advertising-design-advertising-campaign.jpg" />
<img src="https://apple.insidercdn.com/gallery/21413-24435-Screenshot_1-l.jpg" class="imageShown" />
</div>
<!-- PANELS -->
</div>
</div>Fiddle: https://jsfiddle.net/6ardv95r/
UPDATE:
The conversation about the bubbling nature of events has been brought up, but it fails to explain why this behavior persists even when the HTML is simplified to this:
<div class="container">
<div class="background" onmouseover="test(this)">
</div>
<div class="content">
</div>
</div>
In this scenario, the content class does not trigger any hover event, yet the background class still does not respond to any events. Removing the content class allows the background class to function as expected.