Hovering on Rounded-Corners Element

Question

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?

Answer 1

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.}

Answer 2

If you are able to use SVG your element will be whatever you define it to be, and it's bounded by the border shape/size of your of your specs. So in your case a circle you can do something like this:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <line x1="50" y1="50" x2="50" y2="50" stroke="red" class="circle" />
</svg>

and then style it with css:

.circle:hover {
    stroke: blue
}

jsfiddle