html - 移动设备 (iOS) 上的 CSS 不透明度和转换中断超链接

Question

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

这在桌面上运行良好，但在我的 iPhone (iOS 8) 上，在 Safari 中这是有问题的。当您点击图像时，它的不透明度会下降，但不会记录触摸(点击)。您必须再次点击图像才能使超链接起作用并被重定向。

这是我的样式表:

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 修复，以及避免制作特定于平台的样式表的方法。

附言。我知道悬停在触摸设备上毫无意义；这只是桌面用户的一项功能，但我只是不希望它破坏移动设备上的基本功能。

Answer 1

一种选择是通过媒体查询仅将这些样式提供给更大的屏幕。例如

@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;
  }
}