Say a have a div, and that I rounded its corners so it became a circle. Now, I want to apply the :hover
pseudo-element to it. But I have other elements surrounding it, which in turn have :hover
effects themselves. I only want the hover effect of the circle to activate if the mouse is effectively inside the circle.
To illustrate this problem:
The square was my div, and the circle how it looked after rounding its corners. Pretend that the black areas are in front of other elements, whose :hover
effect I also want to be able to use. If I apply the hover pseudo-element to the circle, when the mouse is in a black zone, the circle's hover effect will be activated, and not the one of the element behind the div...
How to (if it can be done) solve this problem?