:hover 状态不会在 iOS 上结束 [英] :hover state doesn't end on iOS

问题描述

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

<nav id="menu"><div><a href="#">首页</a></div>
<a href="#">1</a><导航><div><a href="#">1.1</a></div><div><a href="#">1.2</a></div><div><a href="#">1.3</a></div></导航></div></导航>

CSS:

#menu >div >导航{显示:无；位置:绝对；z指数:9999；}#菜单>div:悬停>导航{显示:块；}

但是 :hover 状态永远不会结束.再次点击(其他地方)后:悬停仍然存在.我可以在没有 javascript 的情况下解决这个问题吗?(小提琴)

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

解决方案

没有.在某些移动设备上，悬停状态会部分中断，因为您无法将鼠标悬停在元素上.您必须使用 javascript.

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

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

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

解决方案

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 状态不会在 iOS 上结束的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！