0

タイトルが悪くない場合は申し訳ありませんが、問題のタイトルをどのように書くことができますか。

だから私はいくつかのメニュー項目とサブメニュー項目を次のように持つメニューバーを持っています：

<div id="mainmenu">
<ul id="menu">
    <li><a class="current" href="">Menu1</a></li>
    <li><a href="#">Menu2</a>
        <ul>
            <li><a href="">Submenu1</a></li>
            <li><a href="">Submenu2</a></li>
        </ul>
    </li>
    <li><a href="">Menu3</a></li>
    <li><a href="">Menu4</a></li>
</ul>
</div>

これが私がこれまでにしたことのフィドルです。

私が欲しいのは、サブメニュー項目がホバーされている場合、たとえばマウスがオンになっている場合や、も暗くする必要がある場合など、メニュー項目も:hover状態に保つことです。CSSでこれを行うにはどうすればよいですか？submenusubmenu2Menu2

私の質問がはっきりしていることを願っています。

編集：

みんなどうもありがとう。

でそれを手に入れました：#menu li:hover

#menu li:hover,#menu a:hover,#menu > li a.current{

} ​
4

6 に答える 6

2

CSSの最後の行で、#menu li:hoverターゲットセレクターに追加します

ここで更新された例：http：//jsfiddle.net/7UaNn/

于 2012-07-12T09:56:02.520 に答える
1

これは、アンカー要素（実際にホバーされているリストアイテムの子）ではなく:hover、親要素の状態にフックすることで実現できます。li

li a:hover,
li:hover > a {
    color: #fff;
}

ホバー状態にあるすべてのサブリンクを回避するには、：nth- ​​child（）を使用する必要がある場合があります。これをテストしませんでした。

/ edit：セレクターを更新し、> aを使用して、ホバーされたリスト要素の直接の子アンカー要素のみを選択します。：nth-​​childなどは必要ありません。

于 2012-07-12T09:56:44.113 に答える
1

現時点では、listitemのすべてのホバースタイルが--Elementに適用されていaます。

liただし、ホバー状態をアクティブに保つには、それらを-Elementに適用する必要があります。

トリッキーになることもありますが、あなたの場合は非常に簡単です。次を追加するだけです。

#menu > li:hover{
 background:#474747;   
}

あなたのスタイルに。

修正したフィドルを見る

于 2012-07-12T09:57:07.717 に答える
1

#menu li:hover > aこれを次のcssに追加します

#menu a:hover, #menu > li a.current {
  // your Style
}

したがって、次のようになります。

 #menu a:hover, #menu > li a.current, #menu li:hover > a {
  // your Style
}

デモを参照してください：http：//jsfiddle.net/akhurshid/bk2HA/7/

于 2012-07-12T10:00:24.263 に答える
1

「a」に加えて、「li」のホバーも追加します。

#menu > li:hover{
background:#474747;   
}
于 2012-07-12T10:05:01.397 に答える
0

'a'の背景ではなく、LIの背景にカーソルを合わせると変更されるものを作成します。

ul#menu li:hover { background:#000; }
于 2012-07-12T09:55:33.060 に答える