css - 卡片背面的左箭头不会在移动设备和桌面设备上返回

Question

当您在移动和桌面设备上单击这张卡片背面的左返回箭头图标时，如何让卡片变回前面的卡片。 https://jsfiddle.net/86pkrs4v/ .我尝试使用 ff 断点，但它不会转换。我仍然不想在桌面和移动设备上应用悬停，您可以单击前卡的任意位置以应用变换样式。

@media (min-width:1025px)  {
.more {
 display: none;
 }
.card:hover  .content {
  transform: rotateY(180deg);
 }
}

@media only screen 
 and (min-device-width : 320px) 
 and (max-device-width : 1024px) {
 .more {
  display: none;
  }
 .more:checked ~ .content {
  transform: rotateY(180deg) !important;
  }
 .card:hover .content {
 transform: rotateY(180deg) !important;
 }
 }

Answer 1

您可以添加以下javascript:

$(".card").click(function(e){
    $(".card").addClass("myclass");
});
$(".card").mouseout(function(e){
    $(".card").removeClass("myclass");
})

和 css 中的类:

.myclass .content{
  transform: rotateY(0deg)!important;
}

在此示例中，您可以单击卡片上的任意位置以使旋转回到 0 度，但您可以将其更改为

$(".button").click(function(e){ ...

如果您只希望箭头可点击。