CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの:hover疑似クラスの使い方をわかりやすく解説

CSSの:hover疑似クラスは、ユーザーがマウスカーソルを要素の上に重ねた（ホバーした）ときに、その要素へ特別なスタイルを適用するためのセレクタです。リンクやボタンにマウスを合わせた瞬間に色が変わるなど、インタラクティブな表現を実現できます。

指定できる値は、任意のカラーネームや16進数カラーコード（#FFCC00など）、rgb()・hsl()など、CSSで有効なあらゆる形式の色指定です。

:hoverの基本的な書き方

セレクタの後ろに「:hover」を付けるだけで定義できます。以下は、リンク（<a>要素）にマウスを乗せたときに文字色をオレンジ系の色（#FFCC00）に変更する例です。

<html>
  <head>
    <style>
      a:hover {
        color: #FFCC00;
      }
    </style>
  </head>
  <body>
    <a href="">ここにマウスを合わせてください</a>
  </body>
</html>

実行結果

このコードをブラウザで開き、リンクの上にマウスカーソルを移動すると、通常時とは異なる色（#FFCC00）に変化します。マウスを離すと元の色に戻ります。

:hoverを使う際のポイント

  • リンク以外にも使える：:hoverは<a>要素に限らず、<button>、<div>、<img>など、ほぼすべてのHTML要素に適用できます。
  • transitionとの組み合わせが効果的：transitionプロパティを併用すると、色の変化がスムーズになり、より洗練された印象になります。
  • タッチデバイスへの配慮：スマートフォンやタブレットにはマウスカーソルがないため、hover状態が意図どおりに動作しない場合があります。重要な情報はhoverだけに頼らず表示するようにしましょう。

このように:hover疑似クラスを活用することで、ユーザーの操作に反応する動的なWebページを簡単に作成できます。

  1. CSSのcubic-bezier()関数の使い方をわかりやすく解説

    CSSでカスタムのイージング（加速・減速のカーブ）を定義したいときに便利なのが、cubic-bezier()関数です。この関数を使うことで、トランジションやアニメーションの速度変化を4つの制御点の値で細かく調整できます。cubic-bezier()関数とはcubic-bezier(x1, y1, x2, y2)の形式で指定し、それぞれの引数には0〜1の範囲（x軸）および任意の値（y軸）を取る数値を渡します。ベジェ曲線の形状によって、アニメーションが「ゆっくり始まって速く終わる」「一瞬オーバーシュートして戻る」などの表現が可能になります。実装例以下のコードでは、マウスホバー時にdiv要素の幅が3

  2. CSSの疑似クラス（Pseudo Class）とは？基本の書き方と実用例をわかりやすく解説

    CSSの疑似クラス（Pseudo Class）は、要素の特別な状態を表現するための仕組みです。ドキュメント内の要素そのものだけでなく、「状態」「位置」「履歴」などといった外的な要素も捉えることができます。たとえば「マウスカーソルが乗っている要素」「すでに訪問済みのリンク」「入力値が有効なフォームフィールド」といった状態は、通常のCSSセレクターでは直接指定できません。こうした場合でも、疑似クラスを使えば柔軟にスタイルを適用できます。疑似クラスの基本構文疑似クラスは、セレクターの後ろにコロン（:）を付けて記述します。Selector:pseudo-class {   &nbs