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

CSSでホバー可能なページネーションを追加する方法

CSSでホバー可能なページネーションを追加する方法

Webサイトにページネーション（ページ送り）を実装する際、ユーザーがどのリンクを選ぼうとしているのか視覚的にわかるようにすると、操作性が大きく向上します。

ホバー効果を追加するには、CSSの :hover セレクターを使用します。これはマウスポインターが要素の上に乗ったときにスタイルを適用できる擬似クラスです。

実装例

以下のコードを実行して、CSSでホバー可能なページネーションを追加してみてください。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .demo {
        display: inline-block;
      }
      .demo a {
        color: red;
        padding: 5px 12px;
        text-decoration: none;
      }
      .demo a.active {
        background-color: orange;
        color: white;
      }
      .demo a:hover:not(.active) {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <h2>Our Quizzes</h2>
    <div class = "demo">
      <a href = "prev.html"><</a>
      <a href = "quiz1.html">Quiz1</a>
      <a href = "quiz2.html">Quiz2</a>
      <a href = "quiz3.html">Quiz3</a>
      <a href = "quiz4.html" class="active">Quiz4</a>
      <a href = "next.html">></a>
    </div>
  </body>
</html>

コードのポイント解説

  • .demo { display: inline-block; }：ページネーション全体をインラインブロックとして表示し、他の要素と横並びに配置できるようにしています。
  • .demo a：各リンクにパディング（5px 12px）を設定してクリックしやすいサイズにし、デフォルトの下線（text-decoration）を削除しています。
  • .demo a.active：現在表示中のページを示すリンクに、オレンジ色の背景と白い文字を適用します。
  • .demo a:hover:not(.active)：アクティブなページ以外のリンクにマウスを乗せたとき、背景色を黄色に変更します。:not(.active) を組み合わせることで、現在のページを示すリンクにはホバー効果が適用されなくなります。

まとめ

:hover セレクターと :not() セレクターを組み合わせることで、現在のページを示す「active」状態を保ちながら、それ以外のリンクに自然なホバー効果を付けられます。背景色やパディングを調整すれば、サイトのデザインに合わせたページネーションを簡単に作成できます。

  1. CSSを使って画像の上にボタンを重ねて表示する方法

    CSSで画像の上にボタンを配置する方法 画像の中央にボタンを重ねて表示したい場合、親要素にposition: relativeを指定し、ボタン側にposition: absoluteを指定するのが基本のテクニックです。さらにtransform: translate(-50%, -50%)を組み合わせることで、ボタンを画像のど真ん中に正確に配置できます。 以下は、CSSを使用して画像の上にボタンを追加する具体的なコード例です。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport&quo

  2. CSSでホバー時にトランジション（アニメーション）を追加する方法を解説

    CSSでホバー時にトランジション（滑らかなアニメーション効果）を追加するには、transitionプロパティと:hover疑似クラスを組み合わせて使用します。あらかじめ要素にtransitionを設定しておくことで、ホバー時の変化が瞬時に切り替わるのではなく、指定した時間をかけてスムーズに変化するようになります。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1&q