css - 丸みを帯びた角の周りの透明な領域がホーミングをブロック

Question

次のような設定をしています。

http://jsfiddle.net/NhAuJ/

問題は、div が正方形でブロックされているため、円の角の近くにホバーすると背景の上にホバーできないことです。真ん中の円のdivをクリックできるようにしたいので（いくつかのものを入れます）、ポインターイベントを使用してカーソルが操作するのをブロックしたくありません。

この種の問題を修正する方法はありますか?

Answer 1

私の知る限り、これを達成する唯一の方法はhtml5キャンバスによるものです。http://jsfiddle.net/NhAuJ/3/

http://www.html5canvastutorials.com/tutorials/html5-canvas-circles/

Answer 2

さて、私はそれを理解しました。これに固執している人にとって、私ができる最善のことは、より大きな円を作成し、その大きな円の内側に別の円を子として配置することでした。

<div class="big-circle">
   <div class="small-circle">

   </div>
</div>

次に、大きな円でポインター イベントを none に設定し、小さな円で auto に設定します。

.big-circle { 
   pointer-events: none;
}
.small-circle {
   pointer-events: auto;
}

問題が完全に解決するわけではありませんが、改善されます。または、スレーブが言ったようにキャンバスを使用します。