Detaillierte Erläuterung der Verwendung des Hover-Selektors in CSS-CSS-Tutorial-php.cn

Detaillierte Erläuterung der Verwendung des Hover-Selektors in CSS

小云云

Freigeben： 2017-12-05 13:20:24

Original

2900 Leute haben es durchsucht

Manchmal müssen Sie die beiden Mausereignisse Mouseover und Mouseout verwenden, aber das Schreiben von js ist schwieriger und Sie müssen Listening-Ereignisse hinzufügen, sodass Dinge, die mit CSS gelöst werden können, so weit wie möglich mit CSS gelöst werden sollten kann die Leistung verbessern. Lassen Sie mich weiter unten darüber sprechen. Verständnis von :hover:

Als wir Computeranwendungen lernten, brachte uns der Lehrer bei, den :hover-Selektor zu verwenden, um das Dropdown-Menü zu vervollständigen. Bisher wussten wir nur, wie man es benutzt, aber wir wussten nicht, warum wir es auf diese Weise benutzten. Notieren Sie sich jetzt, wie man es benutzt

Definition und Verwendung

Definition:

:Hover-Selektor wird verwendet, um das Element auszuwählen, auf dem der Mauszeiger schwebt.

:Hover-Selektor gilt für alle Elemente

Verwendung 1:

Das bedeutet: Wenn die Maus über den Stil a schwebt, wird die Hintergrundfarbeinstellung von a für gelb

a:hover
    { 
        background-color:yellow;
    }

Nach dem Login kopieren

Dies ist die häufigste Verwendung. Ändern Sie einfach den Stil durch ein

Verwendung 2:

Verwenden Sie a, um den Stil anderer Blöcke zu steuern:

Verwenden Sie a, um das Unterelement b von a zu steuern:

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

Nach dem Login kopieren

Verwenden Sie a, um das Geschwisterelement c (Geschwisterelement) von a zu steuern:

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

Nach dem Login kopieren

Verwenden Sie a, um das nahegelegene Element d von a zu steuern:

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

Nach dem Login kopieren

Um es zusammenzufassen:

1. Fügen Sie nichts in der Mitte hinzu, um untergeordnete Elemente zu steuern.
3

Beispiel

Verwenden Sie eine Schaltfläche, um den Bewegungsstatus einer Box zu steuern. Wenn die Maus über die Schaltfläche bewegt wird, stoppt die Bewegung der Box bewegen

Körpercode:

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

Nach dem Login kopieren

CSS-Stil:

    <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>

Nach dem Login kopieren

Erzielen Sie die Wirkung:

Verwandte Empfehlungen:

Farbe der Hover-Animation in CSS3 So verwenden Sie die Animation

Beispiel für die Verwendung der Hover-Pseudoklasse in CSS

Beispielcode für die Vorgehensweise Implementieren Sie den dynamischen Hover-Effekt in CSS

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des Hover-Selektors in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!