ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSのホバーセレクターの使い方を詳しく解説

CSSのホバーセレクターの使い方を詳しく解説

小云云オリジナル: 2017-12-05 13:20:242930ブラウズ

mouseoverとmouseoutの2つのマウスイベントを使う必要がある場合もありますが、jsを書いてlisteningイベントを追加する方が面倒なので、cssで解決できるものは極力cssで解決するとパフォーマンスが向上します。ホバーの理解:

私たちがコンピューターアプリケーションを学んでいたとき、先生はドロップダウンメニューを完了するために:hoverセレクターを使用することを教えてくれました。なぜこのように使用されたのかは説明しません

定義と使用法

定義:

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

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

使用法 1:

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

a:hover
    { 
        background-color:yellow;
    }

これは最も一般的な使用法は、a を通じてスタイルを変更するだけです

使用法 2:

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

a を使用して a のサブ要素 b を制御します:

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

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

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

a を使用して a の近くの要素 d を制御します:

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

1. 子要素を制御するために中間には何も追加しません
2. '+' は兄弟要素を制御します

例

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

ボディコード:

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

cssスタイル:

    <style>
        .animation {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 100px auto;
            animation: move 2s infinite alternate;
            -webkit-animation: move 2s infinite alternate;
        }
        @keyframes move {
            0% {
                transform: translate(-100px, 0);
            }
            100% {
                transform: translate(100px, 0);
            }
        }
        .btn {
            padding: 20px 50px;
            background-color: pink;
            color: white;
            display: inline-block;
        }
        .stop:hover ~ .animation {
            -webkit-animation-play-state: paused;
            animation-play-state: paused;
        }
    </style>

達成効果:

CSSのホバーセレクターの使い方を詳しく解説

関連記事