CSS:hover疑似クラスセレクターの使い方を詳しく解説（コード付き）

作業時にページを動的にするために、フロントエンド開発者は多くの場合、ページにマウスパス効果やマウスアウト効果を追加して、ページをより魅力的にします。この記事では、CSS の hover イベント、CSS:hover の使用方法、コードを使用して CSS:hover を使用して色を変更する方法について説明します。困っている友達は、読み続けてください。

注意深い人は、ホバーは通常、ボタン、ロゴ、画像などの要素に使用されますが、マウスオーバーやマウスアウトも使用されることがありますが、JavaScript の方が面倒であることに気づくでしょう。 . CSS で解決できる場合は CSS を使用することをお勧めします。これによりパフォーマンスが向上します。次に、ホバーの詳しい使い方について説明します。

1. 定義と使用法

定義: マウスがリンク上に移動すると、ホバーにより特別なスタイルを追加できます。

使用法:セレクター: hover{属性:属性値}
例:
a:hover{background-color: yellow;}
.aa:hover{color:#FFF;背景:#0C0;}

ホバー関連の疑似クラス:

:hover セレクターは、リンクだけでなくすべての要素で使用できます。
:リンク セレクターは、未訪問のページのリンク スタイルを設定します。
:訪問済みセレクターは、訪問済みページのリンクのスタイルを設定します。
:アクティブ セレクターは、リンクをクリックしたときのスタイルを設定します。

注:望ましい効果を生み出すには、:hover を :link と :visited の後に配置する必要があります。

2. CSS:hover メソッドの例

インスタンスの説明: マウスが div に入ると、div は徐々に大きくなり、マウスが外に出ると、div は徐々に大きくなります。小さくなり、元のスタイルに戻ります。これは、CSS ホバー イベントを使用して実現されます。

HTML 部分:

<div class="aa"></div>

CSS 部分:

.aa{
            width: 100px;
            height: 100px;
            background-color: blue;
            -webkit-transition: transform 2s linear;
            -moz-transition: transform 2s linear;
            -ms-transition: transform 2s linear;
            -o-transition: transform 2s linear;
            transition: transform 2s linear;
        }
        .aa:hover{
            -webkit-transform: scale(2);
            -moz-transform: scale(2);
            -ms-transform: scale(2);
            -o-transform: scale(2);
            transform: scale(2);
        }

レンダリング:

#左の図はマウスを移動する前のスタイルです。右の図はマウスを移動した後のスタイルです。

注: 上記では、CSS:hover の使用方法を説明していますが、これは比較的簡単です。ホバーによって同じレベルの要素のスタイルが変更されると、隣接する兄弟要素のスタイルが変更されることに注意してください。つまり、ホバーを適用して要素の子要素のスタイルを変更することができます。同時に。他の要素のスタイルを変更するには、疑似クラスを使用します。他の要素は、hover 要素の子要素である必要があります。ここにはデモンストレーションはありませんので、ご自身で試してください。

以上がCSS:hover疑似クラスセレクターの使い方を詳しく解説（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。