How to apply pointer-events:none; to one side of the div after rotating it?

Issue

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;}

Answered By – Amandeep Singh

Answer Checked By – Dawn Plyler (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.