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;
}

但是：悬停状态永远不会结束。再次点击（其他地方）：悬停仍然停留。我可以在没有javascript的情况下绕过这个吗？（Fiddle）

这似乎是摆脱的唯一方法：悬停是：专注于某处（element.focus()）或悬停在其他地方。

Answer 1

没有。某些移动设备上的悬停状态部分被破坏，原因很简单，因为您不能将鼠标悬停在某个元素上。你必须使用javascript。

Answer 2

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

：悬停状态不会在iOS上结束

2 个答案: