CSSホバーとは何ですか?
CSS の :hover セレクターは、カーソルが要素上にあるときに要素にスタイルを適用します。インタラクティブな効果を生み出したり、要素が操作されているときに注意を引くためによく使用されます。
タグ名、クラス、または ID を使用して、:hover セレクターで要素をターゲットにすることができます。
例えば：
.button:hover { background-color: #ff0000; color: #ffffff; } ユーザーがクラス「ボタン」を持つ要素の上にマウスを移動すると、前の例の背景色は赤 (#ff0000) に変わり、テキストの色は白 (#ffffff) に変わります。
:hover セレクターをフォント サイズ、境界線、変換などの他の CSS 要素と組み合わせることで、さまざまなホバー効果を生成できます。これは、Web サイトやアプリケーションの視覚的なフィードバックと対話性を向上させる強力なツールです。
構文：
:hover { css declarations; } CSS を使用してホバーを理解するために、いくつかの例を見てみましょう。
例 1:
HTMLコード:
Hover Me
CSSコード:
.hover-button { background-color: #eaeaea; color: #333333; padding: 10px 20px; border: none; cursor: pointer; transition: background-color 0.3s ease; } .hover-button:hover { background-color: #ff0000; color: #ffffff; } 説明：
上の例では、クラスのホバーボタンを持つボタンがあります。ボタンの初期色の組み合わせは、明るい灰色の背景 (#eaeaea) と暗い灰色のテキスト (#333333) です。ボタンの上にマウスを置くと、背景色が赤 (#ff0000)、テキストの色が白 (#ffffff) に変わります。
0.3 秒の持続時間とイーズ タイミング関数を備えたホバー ボタン クラスの遷移プロパティにより、マウスがボタン上に移動したときに背景色の変化の滑らかな遷移が保証されます。
リンクなどの他の要素 ( )、画像( )、divs ()、またはインタラクティブにしたいその他の要素で、同様のホバー効果を使用できます。 :hover セレクター内のプロパティと値を変更することで、デザインのニーズに合わせたさまざまなホバー効果を作成できます。
例 2: 画像ズーム効果
HTMLコード:
CSSコード:
.image-zoom { overflow: hidden; } .image-zoom img { transition: transform 0.3s ease; } .image-zoom:hover img { transform: scale(1.2); } 例 3: リンクの下線効果
HTMLコード:
<a href="#">Hover Me</a>
CSSコード:
.underline-link { text-decoration: none; transition: border-bottom 0.3s ease; } .underline-link:hover { border-bottom: 2px solid #ff0000; } CSSのホバー機能
CSS:hover 機能を使用すると、Web ページの対話性と視覚効果を向上させることができます。この機能にはさまざまな利点と機能があります。以下は、重要な CSS ホバー機能の一部です。