CSSのA hoverとはどういう意味ですか?

CSSのA hoverとはどういう意味ですか?

hoverとは、指定したHTML要素にカーソルが乗ったときにCSSを実行できる擬似クラスです。擬似クラスとは、指定した要素の状態が変化したときにCSSを実行するセレクタで、hover以外にも複数存在します。hoverを使うことで、カーソルに乗ったときに要素の色を変えたり動きを加えることが可能です。

hoverの具体的な使い方

以下に、hoverを使用してリンクの色を変更する簡単な例を示します。このコードは、カーソルがリンク上に来たときにリンクの色を青色に変えるスタイルを適用します。


            <style>
                a:hover {
                    color: blue;
                }
            </style>
        

上記のCSSコードをHTMLに追加すると、次のように動作します:

こちらをホバーしてみてください

擬似クラスの種類

擬似クラス 説明
:hover カーソルが要素に乗ったときに適用
:active 要素が活性化されたときに適用
:focus 要素がフォーカスされたときに適用

参考文献

さらに詳細な情報については次の記事をご参照ください。

その他の参考記事:css cursor