CSS1と2で定義された、ダイナミック疑似クラスは、ユーザーが特定のアクションをしている時に指定した要素に適用されます。

このダイナミック疑似クラスでは以下の三種類が定義されています。

:hover

ユーザーが指定した要素にカーソルを重ねた時に適用されます。

:active

ユーザーが指定した要素にカーソルを重ね、クリックしてから放すまでの間などに適用されます。また、キーボードでEnterキーを押している間などに適用される場合も有ります。

:focus

ユーザーが特定の操作により適用対象の要素にフォーカスしている場合に適用されます。主にキーボードのTabキーなどで移動した場合になります。
尚、IE6, 7に関しては残念ながら対応していません。IE8は対応していますが、何か微妙な動きをするかもしれません。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

ダイナミック擬似クラスのサンプル

a:hover {
  background: #333;
  color: #fff;
}

a:active {
  background: #33c;
}

a:focus {
  background: #eee;
  color: #000;
}

<p>以下のリンクは
「<a href="http://digiper.com/">digiper</a>」に
関係のありそうなサイトです。</p>
<ul>
<li><a href="http://css-happylife.com/">CSS HappyLife</a></li>
<li><a href="http://digiper.com/kirilog/">KiriLog</a></li>
<li><a href="http://hyper-text.org/">WWW WATCH</a></li>
<li><a href="http://mote-career.com/">モテキャリ☆</a></li>
<li><a href="http://bb-to-ab.com/">Ｂ to Ａ</a></li>
</ul>

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

以下のリンクは「digiper」に関係のありそうなサイトです。

• CSS HappyLife
• digiper
• KiriLog
• WWW WATCH
• モテキャリ☆
• Ｂ to Ａ

それぞれのスタイルを確認するには、:hoverはカーソルを乗せてください。:activeはクリックしっぱなしにしててください。:focusは、IE以外のブラウザでTabキーを頑張って押してください。

これらの疑似クラスは、a要素以外の要素でも適用させる事が可能ですので以下のように指定する事もできます。

ul li img {
  border: 1px solid #999;
}

ul li img:hover {
  border-coloir: blue;
}

この場合、サイドバーのバナーみたいな感じになりますが、この書き方だとIE6が残念なことになってしまうので、以下のように:hoverをa要素に指定して書く事でIE6でも適用されます。

ul li a img {
  border: 1px solid #999;
}

ul li a:hover img {
  border-color: blue;
}

a要素を使える場合は良いのですが、li要素に:hoverの指定をしたいと言った場合には、IE6は諦めるしかありません。

なお、:hover疑似クラスをリンク疑似クラスと併用して使う場合は、宣言の指定順序に注意が必要です。

1. :link
2. :visited
3. :hover
4. :active

このように、:linkと:visited後、:activeの前に書いてください。
コピペ用にコードも貼っておきます。

a:link {
}

a:visited {
}

a:hover {
}

a:active {
}