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

php中世界最好的语言オリジナル: 2018-03-20 17:07:032584ブラウズ

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

場合によっては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 スタイル:

    <body>
        <p class="btn stop">stop</p>
        <p class="animation"></p>
    </body>

達成効果:

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

推奨読書:

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

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

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：六角形で塗りつぶされた画像の背景を作成する CSS次の記事：六角形で塗りつぶされた画像の背景を作成する CSS

続きを見る