Hovering on Rounded-Corners Element
css, hover, html, rounded-corners
Solution
I did a little test on the latest versions of Chrome, Opera, Firefox, IE and Safari; besides Opera*, the browsers seem to work as you would wish.
Opera doesn't, and that's due to faulty browser implementation, and should be filed as a bug. The specs are pretty clear on this point:
Also, the area outside the curve of the border edge does not accept pointer events on behalf of the element.
P.S. (The :hover is a pseudo-class, not a pseudo-element)
* When I originally made this post I tested the issue on the latest version of Opera on Linux which currently is 12.16. As King King pointed out below, this is not the latest version on other operating system, where the test works fine.
Problem
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?