Question

一切正常，但在桌面视图上显示的DIV不在移动视图中显示。我想通过触摸/单击手机/平板电脑来显示DIV。

根据一些建议，我也在ID colA colB cumcountA cumountB 0 A 3 1 1 A 20 4 2 A 102 8 1 3 A 117 10 2 1 4 B 75 0 5 B 170 12 1 1 6 B 200 13 2 2 7 B 300 20 3 3之后尝试了:active，但这是行不通的。

我也不介意JS或jQuery答案。

演示：https://jsfiddle.net/ovg6xzhu/

HTML：

:hover

CSS：

<div class="hoverEffect hoverEffect-first">
  <img src="https://via.placeholder.com/150" />
  <div class="mask">
    <h2>Web Services!</h2>
    <p>We are going to build another sets of css hover image effects with CSS3 animations.<br /><a href="#">View All</a></p>
  </div>
</div>

Answer 1

您的代码正在运行。始终确保清除浏览器缓存。在移动设备上执行此操作的一个快速技巧是在您的网址末尾添加“ /？random”以获取新的负载。请确保将“随机”更改为每次刷新所需的任何内容，以使它不断为您提供新的负载。也就是说，我还必须同意ehab的回答，在移动鼠标悬停时显示/隐藏您的内容并不是很直观。添加诸如按钮之类的视觉指示器，或者让动画在进入视口时自然发生。

Answer 2

您不需要js来实现：css应该足够了，active应该可以完成工作，您发布的代码工作正常-也许您遇到了缓存问题。话虽这么说，对于移动用户而言，这并不是最好的体验，您不应效仿移动设备上的悬停效果，用户不会期望他们需要单击（然后希望他们单击其他元素以使效果消失）。

在移动设备上启用悬停以进行触摸/点击

2 个答案: