我有一个 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;
}
最佳答案
如果您想要它,以便无论何时触摸元素都会出现悬停(就像滚动一样),那么您可以添加:cursor: pointer;
到您希望悬停出现的元素。如果没有这个,iOS 只会在链接上设置 :hover
事件的样式。
关于css - CSS 转换的 Safari 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45986278/