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

CSSの擬似クラス/hoverについて解説します。

検証環境

CSS

macOS

14.1

hover

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

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

h1要素にカーソルを被せるとテキストカラーを赤色に変更するサンプルです。

sample.html

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

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

プレビュー