☰

クラスに基づいてa:hoverを設定する 質問する

tag-icon • tag-icon html css colors hover anchor
クラスに基づいてa:hoverを設定する 質問する

次の HTML があります:

<div class="menu">
    <a class="main-nav-item" href="home">home</a>
    <a class="main-nav-item-current" href="business">business</a>
    <a class="main-nav-item" href="about-me">about me</a>
</div>

a:hoverCSS では、これらのメニュー項目を特定の色に設定したいので、次のように記述します。

.menu a:hover
{
    color:#DDD;
}

a:hoverしかし、この色を<a>クラスのタグにのみ設定したいのですメインナビゲーション項目そして、メインナビゲーション項目 - 現在、色が異なり、マウスオーバーしても変化しないはずです<a>。メニューdivはホバー時に色が変わるはずですが、現在クラス。

CSS を使用してこれを行うにはどうすればよいですか?

私は次のようなことを試しました

.menu a:hover .main-nav-item
{
    color:#DDD;
}

main-nav-item クラスのものだけがホバー時に色を変え、現在のものは変わらないと考えていました。しかし、それは機能しません。

ベストアンサー1

これを試して：

.menu a.main-nav-item:hover { }

これがどのように機能するかを理解するには、ブラウザと同じようにこれを読むことが重要です。はa要素を定義し、.main-nav-item 資格がある要素をそのクラスを持つものだけに適用し、最後に擬似クラスが:hoverその前の修飾式に適用されます。

基本的には次のようになります:

main-nav-itemこのホバー ルールを、 クラス を持つ任意の要素の子孫である クラス を持つすべてのアンカー要素に適用しますmenu。

おすすめ記事