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:

Sad hover makes me sad.

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/

Is this specific to a certain browser? The example works for me on FF. — Kevin Bowersox, Apr 12 '13 at 20:11
Looks like it's specific to WebKit. Problem shows up in Safari and Chrome. — Ian, Apr 12 '13 at 20:13
This is because the element itself is still a square/rectangle, basically the border radius components are made transparent. There is no pure CSS way to handle this without involving a LOT of unnecessary HTML and CSS markup. btw, a much easier way to make a circle is `border-radius:50%;` .... just a side note. — PlantTheIdea, Apr 12 '13 at 20:15
Really? Hmm, I wonder what patch it got fixed in and how close it is to release... — Ian, Apr 12 '13 at 20:17
they must have found a way around it. well then u only need to worry about the small number of people using IE. — PlantTheIdea, Apr 12 '13 at 20:17
Actually makes sense that SVG doesn't have the limitation, too bad it's no universal solution as there's a lot of things svg cannot do uniformly yet. — Niels Keurentjes, Apr 12 '13 at 21:33

score 4 · Accepted Answer · answered Apr 12 '13 at 20:23

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.

Hovering on overlapping CSS3 shapes

1 Answers1

Linked