Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Verwendung des Hover-Selektors in CSS

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

小云云Original: 2017-12-05 13:20:242851Durchsuche

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

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

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

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

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

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

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>

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispielcode für das CSS-RasterlayoutNächster Artikel：Beispielcode für das CSS-Rasterlayout

In Verbindung stehende Artikel

Mehr sehen