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

CSSの:hoverセレクタでリンクにマウスオーバー効果を付ける方法

CSSでリンクにマウスオーバー（ホバー）時のスタイルを適用するには、:hover セレクタを使用します。このセレクタを使うと、ユーザーがマウスカーソルをリンク上に重ねた瞬間に、背景色や文字色などを動的に変化させることができます。

以下は、:hover セレクタを使ってリンクの背景色を変更するシンプルな例です。コードを実際に実行して、マウスカーソルをリンクに重ねたときの効果を確認してみてください。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         a:hover {
            background-color: orange;
         }
      </style>
   </head>
   <body>
      <a href = "https://www.google.com">Google</a>
      <p>上のリンクにマウスカーソルを重ねると、効果を確認できます。</p>
   </body>
</html>

コードの解説

この例では、a:hover { background-color: orange; } というスタイルルールを定義しています。通常の状態では何も変化がありませんが、リンクの上にマウスカーソルが乗った瞬間に、背景色がオレンジ色に変わります。

応用：より洗練されたホバー効果を作る

:hover は背景色以外にもさまざまなプロパティと組み合わせられます。例えば、文字色の変更や下線の表示・非表示の切り替えなどが可能です。

a {
   color: #333;
   text-decoration: none;
}
a:hover {
   color: #fff;
   background-color: orange;
}

さらに、transition プロパティを追加すると、色の変化がスムーズなアニメーションになり、より洗練された印象を与えられます。

a {
   transition: background-color 0.3s ease;
}

このように :hover セレクタは、ナビゲーションメニューやボタンなど、インタラクティブなWebページを作るうえで欠かせない基本テクニックです。ぜひ自分のサイトでも活用してみてください。

  1. CSSでhr要素（水平線）のスタイルを設定する方法をわかりやすく解説

    CSSを使ってhr要素（水平線）のスタイルを設定するには、borderプロパティを活用します。hr要素はデフォルトではシンプルな1本の線として表示されますが、border-topやborder-radiusなどを組み合わせることで、実線・破線・二重線・点線・角丸など、さまざまなデザインに自由にカスタマイズできます。以下に、代表的な5種類の水平線スタイルを実装したサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html> <meta name="viewport" content="width=device-

  2. CSSでラベルのスタイルを設定する方法｜色分けラベルの作り方

    CSSを使用すれば、<span>タグにクラスを割り当てるだけで、色分けされた見やすいラベル（バッジ）を簡単に作成できます。ステータスやカテゴリの表示に役立つため、Webアプリケーションや管理画面などでよく使われるテクニックです。 サンプルコード 以下は、CSSでラベルのスタイルを設定する具体的なコード例です。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"