ホバーセレクターの使い方

今回はホバーセレクターの使い方と、ホバーセレクターを使用する際の注意点を紹介します。実際の事例を見てみましょう。

場合によってはmouseoverとmouseoutの2つのマウスイベントを使う必要がありますが、jsを書いてlisteningイベントを追加する方が面倒なので、cssで解決できるものは極力cssで解決すると改善できますパフォーマンスについて私の考えを話しましょう :hover: の理解
コンピューター アプリケーションを学習していたとき、先生は、 ドロップダウン メニュー を完了するために :hover セレクターを使用することを教えてくれました。それはわかりましたが、なぜこのように使用されるのかはわかりませんでした。次に、その使用方法を書き留めます

定義と使用法

定義:

:ホバーセレクターは、マウスポインターが置かれている要素を選択するために使用されます。フローティング。

:ホバーセレクターはすべての要素に適用されます

使用法 1:

これは、マウスがスタイル a 上にあるとき、a の背景色が黄色に設定されることを意味します

a:hover
    { 
        background-color:yellow;
    }

これは最も一般的な使用法ですが、変更されたばかりですa によるスタイル

使用法 2:

a を使用して他のブロックのスタイルを制御します:

a を使用して a の子要素 ​​b を制御します:

    .a:hover .b {
            background-color:blue;
        }

a を使用して兄弟要素 c (兄弟要素) を制御します) の ):

    .a:hover + .c {
            color:red;
        }

a の最も近い要素 d を制御するには:

1. '+' は兄弟要素を制御します。 (兄弟要素); 3. '～' は近くの要素を制御します。

マウスがボタン上に移動すると、ボックスの移動が停止します。離れていくと、ボックスは動き続けます

body コード:

    .a:hover ~ .d {
            color:pink;
        }

css スタイル:

    
        <p>stop</p>
        <p></p>
    

達成効果:

この記事の事例を読んだ後は、この方法を習得したと思います。 PHP 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

CSSの奇妙なボックスモデルと標準ボックスモデルの使い方

css3アニメーションシーケンスアニメーション

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