要素にマウスカーソルが乗ったときに適用される擬似クラスです。ボタンやリンクのホバー効果などでよく使われます。
:hover { ... }
button:hover { background-color: blue; }
ボタンホバー時に背景色を変更
a:hover { text-decoration: underline; }
リンクホバー時に下線を表示
インタラクションを強調したい要素に使うと効果的。
タッチデバイスでは:activeや:focusも併用推奨。
全ブラウザ対応