css - CSS 转换的 Safari 问题

Question

我有一个 wordpress 网站，我正在帮助 friend 制作

https://capturingscotland.com/galleries

当将鼠标悬停在图库图像上时，它会显示带有更多按钮的透明红色图像。它在 chrome、IE、Firefox 中运行良好，但当我在 iphone 和 Ipad 上使用 safari 尝试它时，它似乎起作用了。下面是使用的 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 事件的样式。