ホバーセレクターの使い方-CSSチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-03-20 17:07:03

オリジナル

2585 人が閲覧しました

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

場合によっては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 サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

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