1

ということで、以下のメニューにしました。

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a>
    <ul>
        <li><a href="">Polish</a></li>
        <li><a href="">Another one</a></li>
        <li><a href="">Another one</a></li>
    </ul>
    </li>
    <li><a href="#">More info</a></li>
    <li><a href="#">Contact</a></li>
</ul>

最初のリンクでは、ホバリングの背景が異なります。「サービス」にカーソルを合わせると 2 番目のポップアップが表示され、2 番目のアイテムにカーソルを合わせると、最初のリンクがアクティブなままになるようにします。

サービス > ポーランド語をホバーしたときのように、サービスの背景をホバーしたままにしたい。それはcssだけで可能ですか？

4

3 に答える 3

4

わかりました、私はこれをゼロから作成しました。確認できます

デモ

デモ 2 (background親で)

.menu > li {
    display: inline-block;
    position: relative;
}

.menu > li > ul {
    display: inline-block;
    position: absolute;
    display: none;
}

.menu > li:hover > ul {
    display: block;
}

.menu > li:hover a {
    color: #f00; 
    /* This selector will color all anchors nested inside li, 
       to be specific, please read the note below */
}

ここで重要なセレクターはこれです。の中にネストされている要素を.menu > li:hover aターゲットにしています。ali

注: デモ 1 では、直接の子孫セレクターを見逃していました>。それを使用して、セレクターを固有のものにしてください。これ .menu > li:hover aを.menu > li:hover > a- New Demoに変更します

于 2013-10-16T10:54:09.157 に答える
0

あなたのcssでこれを試してください..

ul ul:hover + a { color: red; }

デモ

于 2013-10-16T10:56:17.517 に答える
0

このようなもの？

デモ

<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a>
    <ul>
        <li><a href="">Polish</a></li>
        <li><a href="">Another one</a></li>
        <li><a href="">Another one</a></li>
    </ul>
</li>
<li><a href="#">More info</a></li>
<li><a href="#">Contact</a></li>

于 2013-10-16T11:05:08.540 に答える