为什么悬停 div 元素在 iOS Safari (iPhone/iPad) 上不起作用？答案

【问题标题】：Why hovering a div element doesn't work on iOS Safari (iPhone/iPad)?为什么悬停 div 元素在 iOS Safari (iPhone/iPad) 上不起作用？
【发布时间】：2019-04-02 14:19:06
【问题描述】：

代码非常简单，请参阅下面的部分内容。 Full example here:

纯 HTML：

<div class="test1">
  <div class="silver1">
    <span>test1</span>
  </div>
    <span>box 1</span>
</div>

CSS

.test1 {
  border: 1px solid red;
  width: 80px;
  background-color: red;
}

.silver1 {
  width: 30px;
  height: 30px;
  position: relative;
}

.test1:hover .silver1 {
  top: 30px;
  left: 80px;
  border: 3px dotted blue;
  background-color: yellow;
}

测试：

在任何流行的浏览器中用鼠标悬停在 Windows 或麦克工作正常。
通过点击 Android 手机上的框，它可以工作也一样。
点击 Safari (iPhone/iPad) 没有任何反应。
按住 Safari 有时会起作用。

问题如何为 Safari iOS 激活 :hover？理想的纯 CSS 解决方案。

【问题讨论】：

标签： css hover mobile-safari

【解决方案1】：

好吧，“悬停”不是触摸界面上的事情。

Chrome 移动设备倾向于调用第一次点击、悬停（如果已指定）以及随后的点击与点击相同。对于用户来说，此功能也会变得陌生。正如您所发现的，Safari 完全忽略了它。

我建议您非常努力地从悬停中删除任何用户必须执行的内容以完成流程或导航并将其替换为特定于交互的范例。

您甚至可能想要测试设备是否基于触摸并为这些用户提供完全不同的体验，而不是尝试匹配悬停。

这是一个针对触控设备的媒体查询。 @media (any-hover: none) { ... }

更多信息来自CSS-Tricks 和一个好的overview of what's possible in 2018。

【讨论】：

【解决方案2】：

尝试 if 在 :hover 之后放置 :active。

https://codepen.io/mausinc/pen/LgvmXv

.test1:hover:active .silver1 {
  top: 30px;
  left: 80px;
  border: 3px dotted blue;
  background-color: yellow;
}

祝你好运

【讨论】：