How can the hover effect be prevented for the parent element when hovering over its children?
Please take a look at the following code snippet:
const parent = document.getElementById('parent')
parent.onmouseover = function testAlert(e) {
/* alert('parent') */
}
const childRight = document.getElementById('child-right')
childRight.onmouseover = function f(e) {
e.stopPropagation()
/* alert('child-right') */
}
const childLeft = document.getElementById('child-left')
childLeft.onmouseenter = function f(e) {
e.stopPropagation()
/* alert('child-right') */
}#parent {
background: green;
width: 100px;
height: 100px;
position: relative;
margin: 0 auto;
}
#parent:hover {
background: rgba(0, 0, 0, 0.8);
}
#child-left {
background: red;
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: -50px;
}
#child-right {
background: red;
width: 50px;
height: 50px;
position: absolute;
top: 50px;
left: 100px;
}<div id="parent">
<div id="child-left"></div>
<div id="child-right"></div>
</div>https://jsfiddle.net/3tjcsyov/48/
Upon examining the code, it is evident that hovering over the red rectangles also triggers the hover effect on the green rectangle due to CSS behavior. Although using stopPropagation prevents JavaScript handlers from executing on the parent element, the CSS behavior remains unaffected.