如何为移动视图设置悬停动画

Question

我是新来的，所以我希望我的问题有意义。我需要为我的图像调整悬停系统。我有两个——前面和后面。当用户在前面悬停(点击手机(时，它应该显示后面。当光标离开元素时，它应该再次显示前面。

这在手机上不起作用。当用户单击正面时，背面会出现，但他/她必须单击元素外部的才能再次显示正面。

如何让用户不断点击图像元素来显示正面，然后再显示背面？

这是我的代码：

.flip-card {
background-color: transparent;
width: auto;
height: auto;

perspective: 1000px; 
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}

<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://petlifetoday.com/wp-content/uploads/2019/07/new-kitten-750x500.jpg" alt="Avatar" >
</div>
<div class="flip-card-back">
<img src="https://i.pinimg.com/originals/52/73/c8/5273c86755b215c1f3b4fac7bbad935c.jpg" alt="Avatar" >
</div>
</div>
</div>

谢谢

Answer 1

在设置:hover时使用:focus

文件：https://developer.mozilla.org/en-US/docs/Web/CSS/:focus