2

次のように、アイコンとテキストを含むメニューを作成しています。

ここに画像の説明を入力

問題は、小さなアイコンの上にカーソルを置くのではなく、タブの上にカーソルを置いたときにアイコンを「強調表示」することです。これが今起こっていることです：

ここに画像の説明を入力

ここに画像の説明を入力

したがって、私の質問は、1 つの要素 (タブは div) にカーソルを合わせる方法です。これにより、別の要素 (アイコン) のホバー CSS がアクティブになります。

これはアイコンのコードです: (HTML)

<a href="#" class="menubutton">
   <span id="playicon"></span> Servers
</a>

(CSS)

#playicon {
    width:12px;
    height:12px;
    background-image:url("img/svg/play2.svg");
    background-repeat:no-repeat;
    display:inline-block;
}

#playicon:hover {
    background-image:url(img/svg/play_hover.svg);
}

前もって感謝します！:)

4

3 に答える 3

5

指定した HTML を使用して、2 番目のルールを次のように変更する必要があります。

.menubutton:hover #playicon {
    background-image:url(img/svg/play_hover.svg);
}

このルールは#playicon、 hovered の子孫である場合に適用され.menubuttonます。これは、必要なことです (子セレクターを使用する.menubutton:hover > #playiconことは良い考えかもしれませんが、実際には違いはありません)。

また、このように an で<span>識別されるのidは少し奇妙です。同じページにこのスパンが複数あるように見えます。ID は一意である必要があります。複数ある場合はid、 をクラスに置き換えます。

于 2013-08-18T18:18:42.100 に答える
1 
#element1:hover #element2

より高度な CSS テクニックを使用した実際の例

于 2013-08-18T18:20:32.367 に答える
0

:hoverアイコンの代わりにメニューボタンで疑似クラスを使用する

#playicon {
    width:12px;
    height:12px;
    background-image:url("img/svg/play2.svg");
    background-repeat:no-repeat;
    display:inline-block;
}

.menubutton:hover #playicon {
    background-image:url(img/svg/play_hover.svg);
}
于 2013-08-18T18:19:28.917 に答える