:悬停状态不会在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似乎唯一的方法是将: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.

这篇关于:悬停状态不会在iOS上结束的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！