【CSS】:hover（擬似クラス） - カーソルが被さった状態

CSSの擬似クラスの１つ、hoverについてご紹介します。

hover

擬似クラスhoverはポインティングデバイス（マウスカーソル）が要素に被さった状態です。

基本構文

:hover {
    プロパティ名: プロパティ値;
}

サンプル

次のサンプルコードはh1要素にカーソルを被せるとテキストカラーを赤に変更します。

<style>
h1:hover {
    color: red;
}
</style>

<h1>CSSとは</h1>
<p>CSSの正式名称はCascading Style Sheetsです。</p>