I am currently exploring how to create a child element with position: absolute that is placed outside of its parent element without triggering the parent's :hover effect.
Despite the parent having a hover effect, the child elements will still activate the parent element, even if the child extends beyond the boundaries of the parent.
Is there some attribute that I may be overlooking, or is this behavior simply a result of how inheritance functions in HTML?
https://i.sstatic.net/WcjEC.png
In this visual example, my mouse cursor is positioned within the child div but remains outside of the parent div.
body {
display: flex;
align-items: center;
justify-content: center;
}
.container {
background-color: black;
width: 800px;
aspect-ratio: 1 / 1;
}
.container:hover {
background-color: darkorange;
}
.child {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
transform: translate(-50px, 0px);
}<div class="container">
<div class="child"></div>
</div>