I have a flip card (a div with transform: rotateY(180deg); on mouse hover). Some elements from the front side of the div interfere with mouse hover effect of elements on the back side of the div.
Is there a way to apply pointer-events:none; to the front side of the card after the card is flipped? I would do something like .back-side:hover .front-side{pointer-events:none;} but I can’t do it because .back-side nd .front-side are 2 different divs next to each other, and not parent and child elements.
>Solution :
Place front-side div after back-side div, like this:
<div class="back-side"></div>
<div class="front-side"></div>
and add this style:
.back-side:hover + .front-side{pointer-events:none;}