CSSでのリンク状態

インターネットで様々なサイトを訪れる際、通常リンクがマウスホバーに反応することに気づいたことがあると思います。このような効果は、様々な状態でのリンクの動作を設定することで実現できます。

例えば、このように - a:hover - マウスカーソルがリンクの上に乗った状態を捕捉します。この瞬間、例えばリンクの色を変更したり、下線を削除・追加したりできます。構文:hoverは擬似クラスと呼ばれます。擬似クラスは要素の様々な状態を捕捉することを可能にします。

:hoverの他に、未訪問のリンクを捕捉する:link擬似クラスと、訪問済みのリンクを捕捉する:visited擬似クラスもあります。一部のサイトでは、これらを用いてユーザーがどこを訪れたか、まだ訪れていないかを表示しています。さらに、要素がマウスでクリックされたが、まだボタンが離されていない次の状態を捕捉する:active擬似クラスもあります。

次の例では、:hover状態のリンクの下線が消去され、:link状態では赤色が設定され、:visited状態では緑色、:active状態では水色が設定されます。結果、最初はリンクが赤色で、クリックした後は緑色になり、マウスでクリックして離さない間は水色になり、マウスを乗せると下線が消えた状態になります:

cssa:link {
  color: red;
}
a:visited {
  color: green;
}
a:hover {
  text-decoration: none;
}
a:active {
  color: blue;
}

html<a href="#">link</a>

Результат: