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.

CodePudding user response：

Place front-side div after back-side div, like this:

<div ></div>    
<div ></div>

and add this style:

.back-side:hover   .front-side{pointer-events:none;}