CSSで選択したものだけを適用したい(:hover)

Question

メニューで、カーソルを合わせた時にだけ色が変わるようにしたいです。

header a:hover{
color: #f5f5f5;
}

とコードを作ったのですがこれだとheaderの中のaどれか一つ選択するとすべてのaが反応してしまいます。どうすれば選択したものだけを反応するようにできますか？
CSSで可能でしょうか？

Answer 1

対象とする要素のみにクラス名を振って、それに対してcssで指定すれば大丈夫です。
例えば、headerの中にある対象とする要素にmenu-itemというクラス名を振った場合

header .menu-item:hover {
    color: #f5f5f5;
}

といった具合です。

Comments

[jpjp]

ありがとうございます！