マウスが載ったときに装飾を変更する:hoverはよく使われているけども……

リンクなど特定の要素の上にマウスが載ったときに、その要素の装飾を変更するには :hover疑似クラスを使います。これはとてもメジャーな装飾変更方法なので、多くのウェブサイトで使われているでしょう。例えば、下記のようにスタイルシートを書いておけば、リンクの上にマウスポインタが載ると、文字色と太さが変化します。

a:hover {
   color: red;
   font-weight: bold;
}

とても簡単ですね。実際に表示してみると以下のようになります。リンクの上にマウスポインタを載せてみて下さい。文字の装飾が変化します。

この「:hover疑似クラス」で対象になるのは、マウスなどのポインティングデバイスを使って「マウスポインタが要素の上に載ったとき」だけです。しかし、リンクを選択する手段は、マウス操作だけではありません。

リンクは「マウス操作」だけでなく「キー操作」でも選択・クリックができる

例えば「リンク」は、マウスでクリックする以外に、タブキーとエンターキーを使って、キー操作だけでクリックすることができます。

• このページ上で、キーボード上の[TAB]キーを1回押すと、→このページ内に存在する「選択可能な要素」に対して順番にフォーカスが移動していきます。

例えば、以下のダミーボタンを1度クリックしてから、キーボードの[Tab]キーを押してみて下さい。（※ダミーボタンをクリックするのは、フォーカスを1度ボタンに移すため。）
すると、[Tab]キーを押すたびに、下に並んだリンクに対して順番にフォーカスが当たっていくはずです。

キーボードから[Tab]キーを押すごとに、上記のリンクへのフォーカスが1つずつ移動していきます。リンクの上にフォーカスがある状態で、[Enter]キーを押せば、そのリンクをクリックできます。このように、ウェブページ上のリンクは、マウス操作だけでなく、キー操作でも選択できる仕様になっています。
※[Shift]＋[Tab]キーを押せば、逆順にフォーカスが当たります(＝戻る方向に移動します)。

たいていのブラウザでは、「今フォーカスがあるリンク」には点線などの細い枠が付加されて分かりやすくなっています。が、ここでは、フォーカスの対象を分かりやすくするため、フォーカスが当たっているリンクは緑色の太字になるように装飾を加えています。

このように、フォーカスを得た要素の装飾を変更するには、:focus疑似クラスを使って以下のように記述します。

a:focus {
   color: #00aa00;
   font-weight: bold;
}

ここでは、a要素（リンク）に限定して装飾を変更していますが、ボタンなど他の要素に対しても使えます。（フォーカスを得られるような要素であれば何でも）

マウスが載ったときに装飾を変更する:hoverは、フォーカスを得たときに装飾する:focusと同時に使う

これまでに2つのサンプルをご紹介しました。それぞれの動作は以下のようになっていたはずです。

• 1番目のサンプルは、マウスポインタを載せると装飾が変化する。(TABキー操作で選択しても何も起きない)
• 2番目のサンプルは、TABキー操作で選択すると装飾が変化する。(マウスポインタを載せても何も起きない)

これらの装飾は、「どちらか1つ」ではなく「両方同時に指定」しておくと、マウス操作の場合でもキー操作の場合でも同じ装飾効果が得られるようになります。
記述方法は簡単で、以下のように、「:hover」の場合と「:focus」の場合とを半角カンマ記号でつないで、目的のスタイルを記述するだけです。（半角カンマ記号がないと、意味が変わってしまいますので忘れないように注意して下さい。）

a:focus,
a:hover {
   color: #ff00cc;
   font-weight: bold;
}

表示例は以下の通りです。下記の7つのリンクは、マウスポインタを載せた場合でも、[Tab]キーによるフォーカスの移動時でも、同じ装飾効果が出ます。

というわけで、マウス操作でリンクを選択されても、キー操作でリンクを選択されても、同じような装飾を提供する方法でした。

(更新日：2016年03月20日)