html - :境界ボックスが邪魔なため、ホバーはトリガーされません

Question

編集： これはSafariでのみ問題になるようです

編集 2: 最新の Safari ベータ版ではこの問題が修正されています

これが私の問題です：

円形の画像の後ろに円形のタブを作成し、タブにカーソルを合わせたときに不透明度を変更しようとしています。

問題は、円形の画像の境界ボックスが正方形で、画像がタブの前にあるため、:hover 要素がトリガーされないことです。

この問題を示す JSFiddle を作成しました: http://jsfiddle.net/hgarrerereyn/a6L5j/

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;
}

/* This next part doesnt work :(  */

#div1:hover {
opacity:0.5;
}

純粋な CSS で問題が解決しない場合は、jQuery を使用してもかまいません。どんな助けでも大歓迎です