Question

代码非常简单，请参阅下面的部分。 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或Windows中任何流行的浏览器中使用鼠标悬停 Mac工作正常。
通过点击Android Mobile上的框即可使用也是。
在Safari（iPhone / iPad）上轻按没有任何反应。
按住Safari有时会起作用。

问题如何激活Safari iOS的：悬停？理想的是纯CSS解决方案。

Answer 1

尝试将：active放在：hover之后。

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

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

祝你好运

Answer 2

在触摸界面上，“悬停”不是问题。

Chrome移动设备往往会调用第一个水龙头，如果已指定，则将鼠标悬停，然后将其与点击相同。该功能对于用户来说也可能很奇怪。您发现，Safari完全忽略了它。

我建议您尽力从用户必须完成的悬停中删除任何内容，以完成一个过程或导航并将其替换为特定于交互的范例。

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

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

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

为什么将div元素悬停在iOS Safari（iPhone / iPad）上不起作用？

2 个答案: