CSSでホバーを使う方法

CSS の hover 疑似クラスは、マウスが要素上にあるときに要素のスタイルを変更できるようにする、非常に一般的に使用されるセレクターです。この記事では、ホバーの使い方を紹介し、具体的なコード例を示します。

1. 基本的な使用法
ホバーを使用するには、まず要素のスタイルを定義し、次に :hover 疑似クラスを使用して、マウスがホバーしているときに対応するスタイルを指定する必要があります。
たとえば、ボタン要素があるとします。マウスをボタンの上に置くと、ボタンの背景色が赤に、テキストの色が白に変わります。

HTML コード:

<button class="btn">按钮</button>

CSS コード:

.btn {
  background-color: blue;
  color: white;
}

.btn:hover {
  background-color: red;
  color: white;
}

上記のコードでは、.btn はボタン要素のクラス セレクターであり、ボタンのデフォルト スタイルを定義します。 。次に、.btn:hover で、ホバー時のボタンのスタイルを定義します。

2. さまざまな要素への適用
一般的な HTML 要素に適用されることに加えて、ホバーは他のいくつかの特別な要素にも適用できます。以下に、いくつかの一般的な使用シナリオと具体的なコード例を示します。

1. リンク
   通常、リンク上にマウスを置くとリンクの色が変わり、そのリンクがクリック可能であることをユーザーに知らせます。

CSS コード:

a:hover {
  color: red;
}

2. Picture
   マウスを画像の上に置くと、透明度や透明度の変更などの特殊効果を画像に追加できます。ズームインまたはズームアウトします。

HTML コード:

<img class="img lazy"  src="/static/imghw/default1.png"  data-src="image.jpg"  alt="图片">

CSS コード:

.img {
  transition: all 0.3s ease;
}

.img:hover {
  transform: scale(1.1);
}

上記のコードでは、.img クラスが画像のデフォルトのスタイルを定義します。マウスを画像の上に置くと、:hover 擬似クラスを使用して、画像が 1.1 倍に拡大されるように変換属性を設定します。

3. ナビゲーション メニュー
   ナビゲーション メニューでは、通常、ユーザー エクスペリエンスを向上させるために、マウスをホバーしたときにアニメーション効果を追加します。

HTML コード:

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>

CSS コード:

nav ul li a {
  color: #333;
  transition: all 0.3s ease;
}

nav ul li a:hover {
  color: red;
  transform: translateY(-5px);
}

上記のコードでは、 :hover 疑似クラスを追加することでマウス ホバーを設定します。タグ スタイルには、色の変更と 5 ピクセルずつオフセットが含まれています。

3. 結論
hover は CSS で一般的に使用される疑似クラス セレクターであり、マウスをホバーしたときに要素のスタイルを変更するのに役立ちます。この記事の紹介とコード例を通じて、誰もがホバーの使用をよりよく理解し、応用できるようになれば幸いです。実際のプロジェクトでは、誰もがホバーをより柔軟に使用して、自分のニーズやアイデアに応じて豊かな効果を実現できます。

以上がCSSでホバーを使う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。