Hovering on overlapping CSS3 shapes

Question

Alright I have a potentially tricky question regarding interacting with shapes created via CSS3. See the following fiddle: http://jsfiddle.net/MH4LN/1/

Code example:

<div class="container">
    <div class="l1"></div>
    <div class="l2"></div>
    <div class="l3"></div>
</div>

with the following CSS:

.container {
    width: 570px; height: 570px;
    position: relative;
}
.l1 {
    width: 352px;
    height: 352px;
    background: red;

    position: absolute;
    top: 109px;
    left: 109px;
    z-index: 999;

    -webkit-border-radius: 176px;
    border-radius: 176px;
}
.l2 {
    width: 464px;
    height: 464px;
    background: blue;

    position: absolute;
    top: 53px;
    left: 53px;
    z-index: 998;

    -webkit-border-radius: 232px;
    border-radius: 232px;
}
.l3 {
    width: 570px;
    height: 570px;
    background: green;

    position: absolute;
    z-index: 997;

    -webkit-border-radius: 285px;
    border-radius: 285px;
}

.l1:hover, .l2:hover, .l3:hover {
    background: #fff;   
}

My problem is this: I want to apply CSS to each shape on hover. The shapes are created by setting a border radius equal to half the div width/height (creating a circle). However when you hover over the empty area hidden by the radius, you still trigger a hover state on that element. Here's an image to illustrate what I mean:

Is there any way to avoid this? Will I need to use the canvas element for this instead of simple rounded divs?

Edit: Looks like this is specific to WebKit browsers as it works fine in Firefox.

Edit 2: I'm accepting Niels's solution as he's correct, the box model dictates that elements are rectangles, so the way I was going about this was wrong. However I was able to accomplish what I needed with SVGs. Here's an example Fiddle in case anyone is interested: http://jsfiddle.net/uhrHX/1/

Answer 1

The CSS standards do not define this behaviour in level 2 nor 3. All they define is:

The :hover pseudo-class applies while the user designates an element with a pointing device, but does not necessarily activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element.

The CSS box model implicitly states that all block elements form rectangular boxes. Just as text will not float in a circular way around your divs, for all intents and purposes your circles are still rectangular in layout, and to Webkit in behaviour. Gecko developers apparently have gone the extra mile to respect border-radius for hovers, but that is actually inconsistent since they don't do it for 'gaps' in backgrounds and the like, which are essentially also just visual changes just like border-radius.

In short, don't expect browser behaviour to change on this, since CSS standards don't define the behaviour. The only way to properly implement it cross-all-browser is with Javascript and some smart Pythagoras calculations on mouse positions.