ホバー時にボタンの色を変更する: 別の解決策

ホバー時にボタンの色を変更しようとすると、イライラすることがあります。解決策は望ましい効果を生み出すことができません。提供されているサンプル コードを考えてみましょう:

a.button {
   ...
}
a.button a:hover{
     background: #383;
}

このソリューションは、クラス「ボタン」を持つ要素内でリンクがホバーされたときにリンクの背景色を変更しようとします。ただし、セレクターが間違っているため、機能しません。

ホバー時にボタンの色を効果的に変更するには、正しい構文は次のとおりです。

a.button:hover{
     background: #383;
}

この場合、セレクター「a.button:hover」は、ホバーされたときに「ボタン」リンク自体をターゲットにし、意図した色の変更を可能にします。