1

私は次のHTML構造を持っています：

<ul class="container">
    <li>
        <a href="#" class="option"></a>
        <ul class="submenu">
            <li><a href="#">Item A</a></li>
            <li><a href="#">Item B</a></li>
         </ul>
     </li>
</ul>

CSSを使用して、マウスが「サブメニュー」の上にあるときに「オプション」の背景位置を変更することは可能ですか？

CSSの指示対象を見て、「>」、「+」、「〜」を使おうとしましたが、機能しません。間違って使っているのか、それとも不可能なのかわかりません。

誰か助けてくれませんか？

編集1

動作していないCSSは次のとおりです。

a.option~ul.submenu:hover {
    background-position:0 -48px;
}

CSSの指示対象によると、私の場合、「〜」は「a」要素が前にあるすべての「ul」要素を選択しますが、私のコードでは機能しません。

4

3 に答える 3

4

ULの後に「オプション」を配置できる場合は、次のように機能します。

<ul class="container">
    <li>
        <ul class="submenu">
            <li><a href="#">Item A</a></li>
            <li><a href="#">Item B</a></li>
         </ul>
        <a href="#" class="option"></a>
     </li>
</ul>

そしてこのCSS：

.submenu:hover + .option {
    background-position: -20px -20px;
}

平易な英語では、次のようになります。.submenuにカーソルを合わせると、.submenuの直後に表示される.optionの背景位置を変更します。お役に立てば幸いです。

.submenu:hover ~ .option {
    background-position: -20px -20px;
}

これは「+」セレクターと同じですが、.optionが.submenuのすぐ後ろにある必要がない点が異なります。たとえば、「+」は次のマークアップでは機能しませんが、「〜」は機能します。

<ul class="container">
    <li>
        <ul class="submenu">
            <li><a href="#">Item A</a></li>
            <li><a href="#">Item B</a></li>
        </ul>
        <span>Some other element</span>
        <a href="#" class="option"></a>
     </li>
</ul>
于 2012-06-01T15:55:38.580 に答える
1

html構造で必要なものに近づく唯一の方法は、にを置くこと:hoverですli。何かのようなもの：

.container > li:hover > .option {
    background-position: 0 0;
}

変わらないこのフィドルを見てくださいbackground-position、しかしcolor。そこにホバー.submenuすると、親にもホバーしliます。

于 2012-06-01T15:51:56.193 に答える
0

.optionはサブメニューの子ではないため、cssを使用してこれを行うことはできないと思います

于 2012-06-01T15:47:32.587 に答える