Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Hovering on overlapping CSS3 shapes

Hovering on overlapping CSS3 shapes


Alright I have a potentially tricky question regarding interacting with shapes created via CSS3. See the following fiddle:

Code example:

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:

Problem courtesy of: Ian


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.

Solution courtesy of: Niels Keurentjes


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Hovering on overlapping CSS3 shapes


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription