如何在移动设备上用触摸/点击替换 :hover 动画？

在移动设备上用触摸/点击替换 :hover

在由 :hover 触发 CSS 动画的情况下，挑战当您的页面在不支持悬停的移动设备上访问时，就会出现此问题。为了解决这个问题，您可以使用媒体查询从 :hover 切换到触摸或点击事件，同时保持所需的行为。

在您的特定情况下，您的 CSS 当前会在 :hover 上触发动画。要将此功能扩展到移动设备，您可以在 .info-slide 类中附加 :active 选择器与 :hover 组合，确保 :active 选择器出现在代码中的 :hover 之后。

.info-slide:hover, .info-slide:active {
    height: 300px;
}

通过利用这些选择器，您可以实现所需的行为，即在桌面设备的 :hover 和移动设备的触摸/单击上触发动画。为了测试该解决方案的有效性，您可以在移动环境中访问提供的 JSFiddle。

以上是如何在移动设备上用触摸/点击替换 :hover 动画？的详细内容。更多信息请关注PHP中文网其他相关文章！