为什么我的图像叠加在 iPhone 和 iPad 上不起作用？

Question

图像悬停覆盖在我测试过的所有其他平台（桌面、Android 等）上都有效，但它似乎不适用于 iPhone。谁能指出我正确的方向，好吗？我不确定这是否与z-index 或是否可能需要web-kits 有关？

当您悬停或单击.service 时，它应该会显示覆盖文本。请看下面的代码：

.service {
  position: relative;
  width: 80%;
  height: 200px;
  margin: 60px 10%;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  transition: all 0.3s;
}

.main-img-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.5em;
  font-weight: 700;
  color: #f8f9fa;
  opacity: 1;
  transition: 0.5s;
}

.img-title {
  background-color: rgba(0, 0, 0, 0.7);
  padding: 2px 10px;
  font-size: 1.1em;
}

.img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 1%;
  background: rgba(0, 0, 0, 0.7);
  color: #f8f9fa;
  display: flex;
  flex-direction: wrap;
  justify-content: center;
  align-items: flex-end;
  text-align: center;
  opacity: 0;
}

.service:hover .main-img-title .img-title {
  animation-name: title-slide-up;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  z-index: 50;
  background-color: rgba(0, 0, 0, 0);
}

.service:hover .img-overlay {
  opacity: 1;
}

#service-event:hover .main-img-title .img-title {
  animation-name: title-slide-up-low;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}

.overlay-img-description {
  font-size: 18px;
  height: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0 1%;
  width: 100%;
  max-height: 200px;
}

.overlay-img-description ul {
  padding: 0;
}

.overlay-img-description li {
  display: inline-block;
  font-size: 20px;
}

.overlay-img-description li+li::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin: 0 13px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: currentColor;
}

.overlay-img-description p {
  margin: 10px 0 0 0;
  font-size: 0.9em;
}

@keyframes title-slide-up-low {
  from {
    transform: translateY(0)
  }
  to {
    transform: translateY(-45px)
  }
}

<div id="service-event" class="service">
  <img class="bg-img" src="Images/Steel .JPG" alt="Steel" id="steel">
  <div class="main-img-title">
    <div class="img-title" id="steel-title">STEEL</div>
  </div>
  <div class="img-overlay">
    <p class="overlay-img-description" id="steel-desc">Our steel crews are experienced with the construction of system scaffolding, black steel tower and truss structures. We specialise in supplying steel climbing teams with the support of steelhand ground labourers as well as plant operators who are
      familiar with the requirements of truss and steel assembly.</p>
  </div>
</div>

Answer 1

为 img-title 和 img-overlay 添加 z-index，为 img-overlay 定义更高的值，这将解决您的问题。

Answer 2

移动设备不支持伪类:hover。 See this question 替代 :hover

如果您将 :active 选择器与 :hover 结合使用，只要在 :hover 选择器之后调用 :active 选择器，您就可以根据 w3schools 实现此目的。

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

编辑：

因为:active 在 safari 中不起作用，另一种方法是将onclick="function()" 添加到最上面的元素。 function() 应该在网页上创建所需的更改。此解决方案的缺点是移动用户必须再次单击元素才能将其关闭，而不是自动关闭。