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

因此，我开发了一个网站，并创建了一个功能，当你将鼠标悬停在一个框上时，它会显示文本。但是，当我在手机上测试我的网站时，你不能将鼠标悬停，因为没有光标，如果我要点击框，它也不会识别点击。因此，我如何使其兼容，以便在手机上，只要点击一下，它就可以工作

    .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;
}

非常感谢您的帮助

欢迎使用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表示用户当前激活元素时的状态

参考链接

---

这个问题更多的是关于移动状态的UI/UX， 原因是您不能在触摸屏的元素顶部悬停

点击时元素转换为悬停状态在触摸屏上是不直观的

例如：“接受”按钮颜色从灰色转换为绿色。（使用者如何知道按钮是可点击的？）

替代品：

可以在元素进入视图时触发动画， 以下是如何实施的链接：

或

---

在移动设备上保持活动悬停状态。

尝试使用媒体查询和

：focus

Psudo元素