Home/ Questions/Q 8214427
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T11:27:36+00:00

I have a created a 3 circle venn diagram using pure CSS3 and each

  • 0

I have a created a 3 circle venn diagram using pure CSS3 and each circle has a :hover event attached to it. I also have an image of an arrow which is pointing to the center of the venn diagram. I want the arrow to visually appear to be on top of the circles, so I put the z-index higher on the arrow than the circles.

The problem now, is that the :hover event does not trigger on half of the venn diagram now because the arrow image is on top, which causes the hover to be on top of the arrow rather than the circle that I want it to be over. So is it possible to make an element have a high z-index visually but not programmatically?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Assuming you’re on a browser that supports WebKit (this will not work on any versions of IE or Opera), you can use pointer-events: none; to disable the hover effect accordingly.

    .arrow { pointer-events: none; }

    Enjoy and good luck!

    • 0