:hover 状态不会在 iOS 上结束答案

【问题标题】：:hover state doesn't end on iOS:hover 状态不会在 iOS 上结束
【发布时间】：2013-11-11 21:23:22
【问题描述】：

我有一个带有悬停状态的简单菜单：

<nav id="menu">
    <div><a href="#">Home</a></div>
    <div>
        <a href="#">1</a>
        <nav>
            <div><a href="#">1.1</a></div>
            <div><a href="#">1.2</a></div>
            <div><a href="#">1.3</a></div>
        </nav>
    </div>
</nav>

CSS：

#menu > div > nav {
    display: none;
    position: absolute;
    z-index: 9999;
}
#menu > div:hover > nav {
    display: block;
}

但是 :hover 状态永远不会结束。再次点击（其他地方）后：悬停仍然存在。我可以在没有 javascript 的情况下解决这个问题吗？ (Fiddle)

似乎摆脱 :hover 的唯一方法是 :focus 某处 (element.focus()) 或将鼠标悬停在其他地方。

【问题讨论】：

悬停状态在移动设备上被破坏，仅仅是因为您无法将鼠标悬停在元素上。最酷的是它们更像是一个按钮而不是任何东西。这是您可以使用的解决方案，stackoverflow.com/questions/17233804/…。
老兄。尝试内联块，继承和紧凑。也许这会对你有所帮助。我不知道真正的问题，但我只是暗示。 IOS 对网页设计师来说是个麻烦。
我为@JoshPowell 链接的问题添加了另一个答案：stackoverflow.com/a/19715406/453277。 JavaScript 是必需的（不确定是否有替代方案）。

标签： html ios css hover

【解决方案1】：

您可以使用悬停媒体查询来禁用 iOS 上的悬停状态： https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover

【讨论】：

【解决方案2】：

没有。在某些移动设备上，悬停状态会部分中断，因为您无法将鼠标悬停在元素上。您必须使用 javascript。

【讨论】：

我不会说它们“坏了”，而只是说没有像悬停在触摸设备上这样的事情（因此，不同的设备会对依赖于悬停状态）。
@DA。部分损坏？
好吧，也许我们只是在争论语义，但我想说悬停在移动设备上根本不存在。不是它坏了，而是它不存在。说它有些损坏意味着它可能会在某个时候被修复——这在触摸设备上并非如此。
@DA。可以效仿。我认为这是一个解决办法。无论如何，请随意编辑。
哦，我认为它不需要编辑。它肯定明白了这一点。只是想添加一些上下文。