Ignore Mouse Interaction on Overlay Image

Ignore mouse interaction on overlay image

The best solution I've found is with CSS Styling:

#reflection_overlay {
    background-image:url(../img/reflection.png);
    background-repeat:no-repeat;
    width: 195px;
    pointer-events:none;
}

pointer-events attribute works pretty good and is simple.

avoid mouse events on one div that is below another

Remove the pointer events from the link when the card has the class is-flipped.

.card.is-flipped .front_button.link {
  pointer-events: none;
}

var card = document.querySelector('.card');card.addEventListener( 'click', function() {  card.classList.toggle('is-flipped');});

var link = document.querySelector('.link');link.addEventListener( 'click', function(e) {e.stopPropagation(); alert("link");});

body { font-family: sans-serif; }
.scene {  width: 200px;  height: 300px;  border: 1px solid #CCC;  margin: 40px 0;  perspective: 600px;}
.card {  width: 100%;  height: 100%;  transition: transform 1s;  transform-style: preserve-3d;  position: relative;}
.card.is-flipped {  transform: rotateY(180deg);}
.card.is-flipped .front_button.link {  pointer-events: none;}
.card__face {  position: absolute;  width: 100%;  height: 100%;  line-height: 260px;  color: white;  text-align: center;  font-weight: bold;  font-size: 40px;  backface-visibility: hidden;}
.card__face--front {  background: red;}
.card__face--back {  background: blue;  transform: rotateY(180deg);}
.front_button{  background:yellow;  height:200px;  width:100%;  position:absolute;  bottom:0px;  left:0px;  cursor: pointer;}
.link{ border:1px solid red; }

<div class="scene scene--card">  <div class="card">    <div class="card__face card__face--front">      <a class="front_button link">          text      </a>         </div>    <div class="card__face card__face--back">      back    </div>  </div></div><p>Click card to flip.</p>

Related Topics