CSS标准没有在级别2或3中定义此行为。它们定义的是：

hover伪类适用于用户使用指针设备指定元素，但不一定激活它。例如，当光标（鼠标指针）悬停在由该元素生成的框上时，可视用户代理可以应用此伪类。

CSS框模型隐式声明所有块元素都形成矩形框。正如文本不会以循环的方式围绕你的div，为所有的意图和目的你的圈子仍然是矩形的布局，和Webkit的行为。 Gecko开发者显然已经走了额外的英里来尊重边界半径为悬停，但是这是实际上是不一致的，因为他们不做的背景等差距，这本质上也只是视觉变化就像边界半径。

总之，不要指望浏览器的行为会改变，因为CSS标准没有定义行为。正确实现它的跨浏览器的唯一方法是使用Javascript和一些聪明的毕达哥拉斯计算鼠标位置。

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/

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.