html - 如何为移动视图设置悬停动画?
问题描述
我在这里是全新的,所以我希望我的问题是有道理的。我需要为我的图像调整悬停系统。我有 2 个 - 正面和背面。当用户在前面悬停(点击移动设备)时,它应该显示背面。当光标离开元素时,它应该再次显示前面。
这在移动设备上不起作用。当用户点击正面时,背面会出现,但随后他/她必须点击元素外部才能再次显示正面。
如何使用户可以继续单击图像元素以显示正面然后显示背面?
这是我的代码:
.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>
谢谢
解决方案
:focus
在您设置的地方使用:hover
推荐阅读
- neo4j - 查询检查节点中的所有源状态是否已完成?
- regex - Data Studio Regex (Google RE2) 从路径中提取子目录
- mongodb - 按国家/地区划分的类型“戏剧”的电影数量
- python-3.x - 从熊猫列中提取特定值并将其存储在新列中
- bash - 变量 Bash 中的 nums(列)列表
- python-3.x - 即使相机工作,ROS ORB_SLAM2 /orb_slam2_mono/debug_image 也是空白的
- django - 如何在 Django、UWSGI 和 Kubernetes 的峰值负载下优化每秒请求数
- python - 我如何删除笔划Python之间的空格
- flutter - 使用 Flutter Audioplayers 播放 URL 时出错
- mysql - 如何使用 SQL 在表之间进行交互以进行过滤