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

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 的任何流行浏览器中 麦克工作正常。
• 通过点击 Android 手机上的方框即可工作 也是如此。
• 在 Safari (iPhone/iPad) 上点击没有任何反应。
• 按住 Safari 有时会起作用。

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

Answer 1

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

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

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

祝你好运