a:hover
CSSの書き方
セレクタ:hover { プロパティ:値; プロパティ:値; …; }
解説
マウスポインタが上にあるときに要素の書式を変えるスタイルシートです。
色を変えたり、背景に色を付けたりすることができます。
なお、「a:hover」という書き方はプロパティではなく、プロパティを指定するクラスのような働きをします。
「動的擬似クラス」と呼ばれ、多くの要素に働きます。
プロパティ
したがって、リンクテキストの色を変えたり、背景色を付けたりするには、CSSの書き方にもあるようにこれらのプロパティを別途指定しなければなりません。
クラスやID別に指定する
この動的擬似クラスは、クラスやIDを指定することによって、特定の部分でのみ書式を変えたりするということができます。
IDを指定する場合は、「セレクタ#ID名:hover」のように、クラスで指定する場合には「セレクタ.class名:hover」のように書きます。
また、特定の要素にのみスタイルシートを適用したい場合は、「セレクタ:hover 要素名」のように書きます。
IEはリンク要素のみ
InternetExplorerでは、この動的擬似クラスによる指定は、リンク要素にのみしか働きません。
したがって、InternetExplorerでは「a:hover」という書き方にしか対応しておらず、例えば「p:hover」としても、段落要素の上では何も起こりません。
CSS/HTMLサンプル
a:hover { color:red; background-color:#ffdff9; }
リンクにマウスが乗ると、文字列の色と背景色が変わる サンプル
