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

【问题标题】：Enable hover for touch/click on mobile启用悬停以在移动设备上进行触摸/点击
【发布时间】：2020-05-31 19:26:48
【问题描述】：

在桌面视图中一切正常，但在桌面悬停时显示的 DIV 在移动视图中不显示。我想在移动设备/平板电脑中通过触摸/点击显示该 DIV。

根据一些建议，我也尝试在:hover 之后使用:active，但这不起作用。

我也不介意 JS 或 jQuery 答案。

HTML：

<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>

CSS：

.hoverEffect {
  width: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  border-radius: 2px;
  margin-bottom: 30px;
}
.hoverEffect .mask {
  width: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0
}
.hoverEffect img {
  display: block;
  position: relative
}
.hoverEffect h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  padding: 10px;
  margin: 20px 0 0 0
}
.hoverEffect p {
  position: relative;
  color: #fff;
  padding: 0px 20px 20px;
  text-align: center
}
.hoverEffect-first img {
  transition: all 0.2s linear;
  width:100%;
  height:auto;
}
.hoverEffect-first .mask {
  opacity: 0;
  background-color: rgba(61, 90, 128, 0.95);
  transition: all 0.4s ease-in-out;
  width: 100%;
  height: 100%;
}
.hoverEffect-first h2 {
  margin: 10px 40px;
  transform: translateY(-100px);
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.hoverEffect-first p {
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.2s linear;
}
.hoverEffect-first:hover img, .hoverEffect-first:active img {
  transform: scale(1.1);
}
.hoverEffect-first:hover .mask, .hoverEffect-first:active .mask {
  opacity: 1;
}
.hoverEffect-first:hover h2,
.hoverEffect-first:hover p,
.hoverEffect-first:active h2,
.hoverEffect-first:active p {
  opacity: 1;
  transform: translateY(0px);
}
.hoverEffect-first:hover p, .hoverEffect-first:active p {
  transition-delay: 0.1s;
}
.hoverEffect-first:hover a.info, .hoverEffect-first:active a.info {
  transition-delay: 0.2s;
}

【问题讨论】：

标签： javascript jquery css twitter-bootstrap bootstrap-4

【解决方案1】：

您的代码正在运行。始终确保清除浏览器缓存。在移动设备上执行此操作的一个快速技巧是在您的 url 末尾添加“/?random”以获得新的加载。确保每次刷新都将“随机”更改为您希望的任何内容，以便它不断向您发送新的负载。也就是说，我也必须同意 ehab 的回答，在移动设备上悬停时显示/隐藏您的内容并不是很直观。添加按钮等视觉指示器或让动画在进入视口时自然发生。

【讨论】：

谢谢。我正在进一步检查。

【解决方案2】：

您不需要为此目的的 js：css 应该足够了，并且 active 应该可以完成这项工作，您发布的代码工作正常 - 也许您遇到了缓存问题。话虽这么说，这对于移动用户来说并不是最好的体验，你不应该在移动设备上模拟悬停效果，用户不会期望他们需要点击（然后他们应该点击另一个元素以使效果消失）。

【讨论】：

客户想要他们想要的！让我进一步检查。谢谢。