Menu
I just came across this situation where the hidden region of an overflowing element is still affected by mouse clicks or mouse hovers.
I thought that an invisible element or region would not be targeted by mouse events, so, what am I missing here?
Follows an example where this behavior pops up, one just have to hover the mouse outside of the circle but near the green square and you will notice the :hover selector taking effect.
#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: This odd behavior does not occur as pointed out in the comments in Firefox unlike happens for Chrome.
Cheers, utxeee.
567
According to W3 specification overflow: hidden and border-radius show work:
5.3. Corner Clipping
A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve. Also, the area outside the curve of the border edge does not accept mouse events on behalf of the element.
But it doesn't (seems like a WebKit bug). As the one of the solutions you can use clip-path property (currently supported by all major browsers except IE) like this:
clip-path: inset(0 0 0 0 round 200px);
-webkit-clip-path: inset(0 0 0 0 round 200px);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
