5

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

<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()) 或悬停在其他东西上。

4

2 回答 2

1

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

于 2013-10-31T20:39:50.027 回答
1

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

于 2018-06-01T00:58:48.973 回答