使悬停功能与移动设备兼容

Question

所以我开发了一个网站并创建了一个功能，当您将鼠标悬停在框上时，它会显示文本，但是当我在移动设备上测试我的网站时，您无法悬停，没有光标并且如果我单击该框，它无法识别点击，所以我如何使其兼容，以便在移动设备上只需单击等即可正常工作

.container .box .content{
position: absolute;
top: 100%;
height: calc(100% - 100px);
text-align: center;
padding: 20px;
box-sizing: border-box;
transition: 1s;
opacity: 0;
}

.container .box:hover .content{
top: 100px;
opacity: 1;
}
.container .box .content h3{
margin: 0 0 10px;
padding: 0;
color: #fff;
font-size: 24px;
}
.container .box .content p{
justify-content: center;
margin: 0;
padding: 0;
text-align: center;
color: #fff;
}

当我将鼠标悬停在框上时，这就是它在网站上的外观

任何帮助都非常感谢

Answer 1

欢迎来到 SO！

悬停在移动设备上是不可能的，因为没有持久性 光标 - 默认情况下上次触摸点的内存。

他们感知交互的唯一方法是触摸，这类似于单击或选择，因此CSS中的:active或Javascript中的onclick是目前唯一的选择。

在那里，您可以使用:focus和:active以及:hover

.container .box:hover .content,
.container .box:focus .content,
.container .box:active .content{
top: 100px;
opacity: 1;
}

：focus 表示当前选择元素时的状态 接收输入和

：active 表示用户当前正在激活元素时的状态

参考链接 https://www.w3schools.com/css/css_pseudo_classes.asp

Answer 2

这个问题更多是关于移动状态的UI/UX， 原因是您无法将鼠标悬停在触摸屏中的元素顶部。

单击时元素转换为悬停状态在触摸屏上并不直观。

例如："接受"按钮颜色 从灰色转换为绿色。(用户应该如何知道按钮是可点击的？

替代 品：

您可以在元素进入视图时触发动画， 以下是如何实现的链接：如何判断 DOM 元素在当前视口中是否可见？

或

在移动设备上将其保留为活动悬停状态。