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 に答える