html5 - :hover won't trigger because bounding box is in the way -

edit: seems problem on safari

edit 2: newest safari beta fixes problem

here problem:

i trying create circular tab behind circular image , change opacity when hover on tab.

the problem is, because bounding box on circular image square , image in front of tab, :hover element won't trigger.

i created jsfiddle demonstrates problem: http://jsfiddle.net/hgarrerereyn/a6l5j/

here code in jsfiddle:

html:

<div id="div1"></div> <div id="div2"></div> 

css:

#div1 { height:50px; width:50px; border-radius:50px; background:red; position:absolute; top:0px; left:0px; z-index:-1; }  #div2 { height:200px; width:200px; border-radius:200px; background:blue; position:absolute; top:0px; left:0px; }  /* next part doesnt work :(  */  #div1:hover { opacity:0.5; } 

i okay using jquery if pure css won't cut it. appreciated

if want change when hovering on circle in div2, try setting pointer-events: none; on overlapping div.

btw: i'm running safari beta , hover taking affect expected. other answer may wait :)

working fiddle

#div2 {   height:200px;   width:200px;   border-radius:200px;   background:blue;   position:absolute;   top:0px;   left:0px;   pointer-events: none; }