:hover 状态不会在 iOS 上结束

Question

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

<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 的情况下解决这个问题吗？（小提琴）

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

Answer 1

不可以。悬停状态在某些移动设备上会部分损坏，因为您无法将鼠标悬停在元素上。您将必须使用 JavaScript。