私はこのような純粋なcssベン図を作成しようとしています
マウスホバーで円が強調表示される場所。ただし、問題は次のとおりです。このborder-radiusプロパティを使用して、円の角（円の外側）にマウスを合わせると、ホバーもトリガーされます。
デモについては、このjsfiddleリンク を参照し、赤い領域にカーソルを合わせてください
これを回避するためのCSSソリューションはありますか、それともjavascriptを使用して計算する必要がありますか？
編集：回答してくれたすべての人に感謝します。ブラウザ情報も掲載しておけばよかったです。私はChrome12を使用しています。これまでのところ、このバグはChromeに存在するようです。このページを更新して、さらに調査結果があれば更新します。
2013年8月の更新： Chrome 28でこれを再度テストしたところ、問題は発生しなくなりました。
で円を描くことは可能border-radius:50%ですが、それはちょっとしたハックです。また、CSS3Pieのようなさらに多くのハックを使用しないと、IE8以下では機能しません。
したがって、フィドルの例で見栄えの良いベン図を作成したことは認めますが、これを行うための最良の方法ではないと思います。
より良い解決策は、適切なグラフィックライブラリを使用して、CanvasまたはSVGのいずれかを使用して図を描画することです。
Canvasの場合、次のライブラリを試すことができます：http: //www.canvasxpress.org/venn.html
SVGの場合、約4行のコードでホバー可能なベン図を生成するRaphaelをお勧めします。
CanvasもSVGもIE8でサポートされていないことは知っていますが、どちらもサポートされていないborder-radiusので、それはあなたの基準ではないと思います。
いずれにせよ、Raphaelはブラウザを検出し、IEで実行されている場合はSVGではなくVMLをレンダリングするため、実際にはすべてのバージョンのIEで機能します。キャンバスのサポートは、本当に必要な場合は、古いIEにハッキングすることもできます。