0

この方法で CSS ホバーを操作するのはこれが初めてです。しかし、うまくいきません。

ユーザーがナビゲーションの項目にカーソルを合わせたときに、ナビゲーション クラウドを表示しようとしています。

これは私の現在のCSSです

.menuBox li a:hover,.menuBox li.selected a { color: #fff; background-color: #068dda; }

.menuBox .cloudnav { display: none; position: absolute; width: 995px; height: 500px; background-color: #fff; z-index: 999999; border: 1px solid #4a4d4b;}

.menuBox li a:hover>.cloudnav { display: block; }

これは私の現在のhtmlです

<nav class="menuBox">
<ul>
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
</ul>
<div class="cloudnav">test</div>
</nav>

私は皆さんのために jsfiddle も作成しました: http://jsfiddle.net/tAgEj/

私も試し.menuBox li a:hover + .cloudnav { display: block; }ましたが、それもうまくいきませんでした。

何が？

4

1 に答える 1

1

a:hover では機能しません。しかし、新しいブラウザでは、次のように処理できます

.menuBox ul:hover + .cloudnav { display: block; }

しかし、これは新しいブラウザーでのみ機能します。<a>

.menuBox li a:hover>.cloudnav { display: block; }要素div.cloudnavの直接の子ではないため、これは機能しません。aこれは、

<a href="#">something<div class="cloudnav"></div></a>
于 2013-09-25T14:15:23.983 に答える