：hover state does not end on iOS [英] :hover state doesn't end on iOS

问题描述

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

I have a simple menu with a hover state:

<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？ （小提琴）

But the :hover state never ends. After another tap (somewhere else) :hover still stays. Can I get around this without javascript? (Fiddle)

这似乎是唯一的方法要移除：hover is to：focus某处（ element.focus（））或悬停在其他位置。

It seems like the only way to get rid of :hover is to :focus somewhere (element.focus()) or hover on something else.

推荐答案

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

No. Hover states are partially broken on some mobile devices simply because you can't hover over an element. You will have to use javascript.

这篇关于：hover state does not end on iOS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！