Hovering On Overlapping Css3 Shapes

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:

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

Share