純粋なCSS3を使用して3サークルのベン図を作成しました。各サークルには、：hoverイベントが添付されています。ベン図の中心を指す矢印の画像もあります。矢印が円の上に視覚的に表示されるようにしたいので、z-indexを円よりも矢印の上の方に配置します。
ここでの問題は、矢印の画像が上にあるため、ベン図の半分で：hoverイベントがトリガーされないことです。これにより、ホバーが、上に置きたい円ではなく、矢印の上になります。 。それで、要素に視覚的に高いz-indexを持たせることは可能ですが、プログラム的にはできませんか？
WebKitをサポートするブラウザーを使用していると仮定すると（これはIEまたはOperaのどのバージョンでも機能しません）、pointer-events: none;それに応じてホバー効果を無効にするために使用できます。
.arrow { pointer-events: none; }
楽しんで頑張ってください！
CSS
pointer-events:none;
これはすべてのWebkitブラウザで機能します。ただし、すべてで機能させたい場合は、 http： //www.vinylfox.com/forwarding-mouse-events-through-layers/を参照する価値があるかもしれません。