html - :hover state doesn't end on 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 的情况下解决这个问题吗？ ( Fiddle )

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

Answer 1

没有。悬停状态在某些移动设备上被部分破坏，仅仅是因为您不能将鼠标悬停在元素上。您将不得不使用 javascript。