Невозможно нажать на ссылку в flip-wrapper

Question

Я использую свойство transform, которое отлично работает, но если я добавлю какую-либо ссылку, тогда он не будет работать и быстро вернется на -180 градусов, если я нажму на заднюю карту. Я попытался удалить «перевернутый» класс при уходе с мыши, но не повезло. Любое предложение, пожалуйста?

$(document).ready(function() { 
 
    $('.flipWrapper').click(function() { 
 
     $(this).find('.card').toggleClass('flipped'); 
 
     return false; 
 
    }); 
 
});

.flipWrapper { 
 
\t -webkit-perspective: 1000; 
 
\t -moz-perspective: 1000; 
 
\t -ms-perspective: 1000; 
 
\t -o-perspective: 1000; 
 
\t perspective: 1000; 
 
\t width: 100%; 
 
\t height: 300px; 
 
\t position: relative; 
 
\t margin: 0 auto; 
 
\t cursor: pointer; 
 
\t text-align:center; 
 
} 
 

 
.flipWrapper .card.flipped { 
 
\t -webkit-transform: rotatey(180deg); 
 
\t -moz-transform: rotatey(180deg); 
 
\t -ms-transform: rotatey(180deg); 
 
\t -o-transform: rotatey(180deg); 
 
\t transform: rotatey(180deg); 
 
} 
 
.flipWrapper .card { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t -webkit-transform-style: preserve-3d; 
 
\t -moz-transform-style: preserve-3d; 
 
\t -ms-transform-style: preserve-3d; 
 
\t -o-transform-style: preserve-3d; 
 
\t transform-style: preserve-3d; 
 
\t -webkit-transition: 0.5s; 
 
\t -moz-transition: 0.5s; 
 
\t transition: 0.5s; 
 
\t margin: 0 auto; 
 
\t text-align:center; 
 
} 
 
.flipWrapper .card .face { 
 
\t padding-top:5px; 
 
\t padding-bottom:5px; 
 
\t padding-left:5px; 
 
\t padding-right:5px; 
 
\t background:#383838; 
 
\t position: absolute; 
 
\t margin: 0 auto; 
 
\t text-align:center; 
 
\t -webkit-backface-visibility: hidden; 
 
\t -moz-backface-visibility: hidden; 
 
\t -ms-backface-visibility: hidden; 
 
\t -o-backface-visibility: hidden; 
 
\t backface-visibility: hidden; 
 
\t z-index: 2; 
 
} 
 
.flipWrapper .card .front { 
 
\t position: absolute; 
 
\t z-index: 1; 
 
\t color: white; 
 
\t cursor: pointer; 
 
} 
 
.flipWrapper .card .back { 
 
\t -webkit-transform: rotatey(-180deg); 
 
\t -moz-transform: rotatey(-180deg); 
 
\t -ms-transform: rotatey(-180deg); 
 
\t -o-transform: rotatey(-180deg); 
 
\t transform: rotatey(-180deg); 
 
\t background:#383838; 
 
\t cursor: pointer; 
 
\t width:100%; 
 
\t height:100%; 
 
\t padding:0; 
 
} 
 
.flipWrapper .card .back p{ 
 
\t padding-top:20px; 
 
\t text-align:left; 
 
\t padding-left:20px; 
 
\t padding-right:20px; 
 
} 
 
.flipWrapper .card .back p:last-child{ 
 
\t padding-top:10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="flipWrapper"> 
 
      <div class="card"> 
 
      <div class="face front"> 
 
      <img src="http://magicpatrick.fr/images/r2.png"alt=""></div> 
 
       <div class="face back"> 
 
       <p><small><em>Mariages</em></small></p> 
 
       <p>L’événement le plus magique de la vie d’une personne, le jour de son mariage, est un jour à marquer d’une pierre blanche, et quelle plus belle façon de le célébrer qu’avec un artiste hors du commun. </p><br><a class="" href="google.com">Read more</a> 
 
       
 
    </div> 
 
    </div> 
 
    </div>

Answer 1

Просто добавьте этот

$("a.read-more-link").click(function(event){ 
    event.stopPropagation(); 
}); 

и вы Read More ссылку быть <a class="read-more-link" href="google.com">Read more</a>

event.stopPropagation();

предотвращает дальнейшее распространение текущего события в захвате и барботажных фаз.

Подробнее о event.stopPropataion()

$(document).ready(function() { 
 
    $('.flipWrapper').click(function() { 
 
     $(this).find('.card').toggleClass('flipped'); 
 
     return false; 
 
    }); 
 
    $("a.read-more-link").click(function(e){ 
 
    e.stopPropagation(); 
 
    }) 
 
});

.flipWrapper { 
 
\t -webkit-perspective: 1000; 
 
\t -moz-perspective: 1000; 
 
\t -ms-perspective: 1000; 
 
\t -o-perspective: 1000; 
 
\t perspective: 1000; 
 
\t width: 100%; 
 
\t height: 300px; 
 
\t position: relative; 
 
\t margin: 0 auto; 
 
\t cursor: pointer; 
 
\t text-align:center; 
 
} 
 

 
.flipWrapper .card.flipped { 
 
\t -webkit-transform: rotatey(180deg); 
 
\t -moz-transform: rotatey(180deg); 
 
\t -ms-transform: rotatey(180deg); 
 
\t -o-transform: rotatey(180deg); 
 
\t transform: rotatey(180deg); 
 
} 
 
.flipWrapper .card { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t -webkit-transform-style: preserve-3d; 
 
\t -moz-transform-style: preserve-3d; 
 
\t -ms-transform-style: preserve-3d; 
 
\t -o-transform-style: preserve-3d; 
 
\t transform-style: preserve-3d; 
 
\t -webkit-transition: 0.5s; 
 
\t -moz-transition: 0.5s; 
 
\t transition: 0.5s; 
 
\t margin: 0 auto; 
 
\t text-align:center; 
 
} 
 
.flipWrapper .card .face { 
 
\t padding-top:5px; 
 
\t padding-bottom:5px; 
 
\t padding-left:5px; 
 
\t padding-right:5px; 
 
\t background:#383838; 
 
\t position: absolute; 
 
\t margin: 0 auto; 
 
\t text-align:center; 
 
\t -webkit-backface-visibility: hidden; 
 
\t -moz-backface-visibility: hidden; 
 
\t -ms-backface-visibility: hidden; 
 
\t -o-backface-visibility: hidden; 
 
\t backface-visibility: hidden; 
 
\t z-index: 2; 
 
} 
 
.flipWrapper .card .front { 
 
\t position: absolute; 
 
\t z-index: 1; 
 
\t color: white; 
 
\t cursor: pointer; 
 
} 
 
.flipWrapper .card .back { 
 
\t -webkit-transform: rotatey(-180deg); 
 
\t -moz-transform: rotatey(-180deg); 
 
\t -ms-transform: rotatey(-180deg); 
 
\t -o-transform: rotatey(-180deg); 
 
\t transform: rotatey(-180deg); 
 
\t background:#383838; 
 
\t cursor: pointer; 
 
\t width:100%; 
 
\t height:100%; 
 
\t padding:0; 
 
} 
 
.flipWrapper .card .back p{ 
 
\t padding-top:20px; 
 
\t text-align:left; 
 
\t padding-left:20px; 
 
\t padding-right:20px; 
 
} 
 
.flipWrapper .card .back p:last-child{ 
 
\t padding-top:10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="flipWrapper"> 
 
      <div class="card"> 
 
      <div class="face front"> 
 
      <img src="http://magicpatrick.fr/images/r2.png"alt=""></div> 
 
       <div class="face back"> 
 
       <p><small><em>Mariages</em></small></p> 
 
       <p>L’événement le plus magique de la vie d’une personne, le jour de son mariage, est un jour à marquer d’une pierre blanche, et quelle plus belle façon de le célébrer qu’avec un artiste hors du commun. </p><br><a class="read-more-link" href="google.com">Read more</a> 
 
       
 
    </div> 
 
    </div> 
 
    </div>