Question

我有一个带有图像的网站，可以将用户重定向到另一个页面（超链接）。将鼠标悬停在图片上时，使用opacity和transition将其不透明度降至50％。

这在桌面上工作正常，但在Safari中的我的iPhone（iOS 8）上有问题。当您点击图像时，其不透明度会下降，但不会记录触摸（单击）。您必须再次点击图像才能使超链接工作并重定向。

这是我的样式表：

a img {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 250ms ease-in-out;
    transition: opacity 250ms ease-in-out;
}

a img:hover {
    opacity: 0.5;
    visibility: visible;
}

我在SO和Google上搜索过类似的问题，但没有一个答案是针对我的。对于大多数人来说，添加visibility: visible;似乎可以解决问题，但不适合我。它没有任何效果。你可以看到它在我的CSS中。（或者我在这里做错了什么......）

我会尽我所能，但我更喜欢一些狡猾的CSS修复方法，以及避免制作特定于平台的样式表的方法。

PS 即可。我知道悬停在触摸设备上毫无意义;这仅仅是桌面用户的一项功能，但我不想让它在移动设备上弄乱基本功能。

Answer 1

一个选项就是通过媒体查询将这些样式仅提供给更大的屏幕。 E.g。

@media only screen and (min-width: 30em) {
  a img {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 250ms ease-in-out;
    transition: opacity 250ms ease-in-out;
  }

  a img:hover {
    opacity: 0.5;
    visibility: visible;
  }
}

移动设备上的CSS不透明度和转换中断超链接（iOS）

1 个答案: