为什么我的覆盖在 Safari 上不起作用，但在 Chrome 上起作用？

如何解决为什么我的覆盖在 Safari 上不起作用，但在 Chrome 上起作用？

图像悬停叠加适用于我测试过的所有其他平台（桌面、Android 等），但它似乎根本不适用于 Safari。不适用于 iPhone、iPad 和 Mac。我知道 :hover 不适用于触摸屏设备，但我已经包含了 :active 和 :focus，但它仍然无法在 Safari 上运行。

当您将鼠标悬停在或点击 .service 时，标题应向上过渡，并且覆盖文本应出现在其下方。请看下面的代码：

.service {
  position: relative;
  width: 80%;
  height: 200px;
  margin: 60px 10%;
  Box-shadow: rgba(0,0.3) 0px 19px 38px,rgba(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.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.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,.service:active .main-img-title .img-title,.service:focus .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);
}

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

#service-event:hover .main-img-title .img-title,#service-event:active .main-img-title .img-title,#service-event:focus .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>

解决方法

它实际上适用于 Mac 上的 Safari，但不适用于移动设备。

问题是您想向元素添加 :focus 和 :active 样式，默认情况下该样式不可聚焦。此外，您希望在移动设备上进行这种行为，其中交互有点不同。例如，您的 .service 元素是一个 div，它不像表单控件或按钮那样具有交互性。

有一种方法可以通过使用 div 属性使 tabindex 成为焦点，如 here 所示。本 question 中也探讨了这种情况。