Recently, I encountered a situation where the hidden area of an overflowing element still responded to mouse clicks and hovers.
I was under the impression that an invisible element or region would not be affected by mouse events. So, what am I overlooking here?
Here is an example demonstrating this unexpected behavior: hover your mouse outside of the circle but near the green square, and you will see the :hover selector in action.
#circle {
position:absolute;
height: 50%;
width: 28%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: black;
color: white;
border-radius: 200px;
overflow: hidden;
}
#square {
height: 50%;
width: 50%;
transform: translate(-50%, -50%);
background: green;
cursor: pointer;
}
#square:hover {
background: yellow;
}<body>
<div id="circle">
<div id="square"></div>
</div>
</div>Added on 2016-12-05: Interestingly, this peculiar behavior does not occur in Firefox as some comments have pointed out, unlike in Chrome.
Cheers, utxeee.