css转换的Safari问题

Question

我有一个 wordpress 网站，我正在帮助一个朋友

https://capturingscotland.com/galleries

将鼠标悬停在图库图像上时，它会显示一个带有更多按钮的透明红色图像。它在 chrome、IE、Firefox 中运行良好，但是当我在带有 safari 的 iphone 和 Ipad 上尝试它时，它似乎不起作用。下面是使用的 CSS 类。 porto-item 是图库项目

.porto .porto-item:hover img {
  -webkit-transform: scale(1.2);
      -ms-transform: scale(1.2);
          transform: scale(1.2);
  opacity: .2;
}
.porto .porto-item:hover .porto-info {
  opacity: 1;
  box-sizing: border-box;
  height: 100%;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}
.porto .porto-item:hover .title {
  opacity: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  text-shadow: 0 0 0 white;
}
.porto .porto-item:hover .categories {
  opacity: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  text-shadow: 0 0 0 white;
}
.porto .porto-item:hover .more {
  opacity: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  text-shadow: 0 0 0 white;
}

Answer 1

如果您希望它在每次触摸项目时出现悬停（例如滚动），那么您可以添加：cursor: pointer; 到您希望悬停出现的元素。如果没有此 iOS，则仅在链接上设置 :hover 事件样式。