All geek questions in one place

Prevent access to hidden areas of overflowing items

I just stumbled upon this situation where the hidden area of ​​the overflow element still depends on mouse clicks or mouse clicks.

I thought that an invisible element or region would not be targeted at mouse events, so what am I missing here?

Following the example, when this behavior appears, you just need to move the mouse outside the circle, but next to the green square, and you will notice that the hover selector is valid.

#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 strange behavior does not occur, as noted in the comments in Firefox, unlike Chrome.

Cheers, utxeee.

+5
source share
1 answer

According to the W3 specification overflow: working with covert and borderline displays:

5.3. Corner cropping

Field frames, but not its border image, are tied to the corresponding curve (as defined by the "background clip"). Other effects of this clip to the border or edge (for example, “overflow” other than “Visible”) should also be attached to the curve. The contents of replaced items are always cropped to the curve of the edge of the content. In addition, the area outside the curve of the border edge does not accept mouse events on behalf of the element.

But this is not the case (it seems like a WebKit error). As one of the solutions, you can use the clip property (currently supported by all major browsers except IE), for example:

 clip-path: inset(0 0 0 0 round 200px); -webkit-clip-path: inset(0 0 0 0 round 200px);
0
source

Source: https://habr.com/ru/post/1260788/

More articles:


All Articles