iphone - 是否可以隐藏 :hover element (pure css) when tapping outside again on iPhone?

Question

我在 :hover 元素上使用双击(在 iPhone 上)来显示额外信息，没有 javascript，只是简单的 css :hover 伪类。现在我的问题是出现在 :hover 上的 div 不再消失，只有当我点击另一个 :hover 元素时。iOS 中的 :hover-functionality 有变化吗？

li.to-be-hovered {
  position:relative;
}
li.to-be-hovered div.hidden {
  display:none;
}
li.to-be-hovered:hover div.hidden {
  display:block;
  position:absolute;
}

还有一些像宽度、顶部、左侧、边距、背景、z-index 等等...

<div>
  <ul>
    <li class="to-be-hovered">
      <div class="hidden">
        lots of extra information with image, span, link elements
      </div>
    </li>
  </ul>
</div>

在我的 iPhone (4S) 上，div.hidden 出现在 div.to-be-hovered 的第一个选项卡上，但在点击元素外的其他地方时不再消失。有人知道这个效果吗？是否可以使用纯 CSS 使其再次消失，还是我必须对所有这些元素使用 Javascript？

Answer 1

简单且不需要 javascript。这是修复

将此添加到您的 css 媒体查询

body {cursor: pointer}