Ausführliche Erklärung zur Verwendung des CSS:hover-Pseudoklassenselektors (mit Code)

Um die Seite bei der Arbeit dynamisch zu gestalten, fügen Frontend-Entwickler der Seite häufig Mouse-Pass- und Mouse-Out-Effekte hinzu, um die Seite attraktiver zu machen. In diesem Artikel erfahren Sie mehr über das Hover-Ereignis in CSS, wie man CSS:hover verwendet, und erklärt anhand von Code, wie man mit CSS:hover die Farbe ändert. Freunde, die in Not sind, lesen Sie bitte weiter.

Aufmerksame Freunde werden feststellen, dass Hover im Allgemeinen auf Elemente wie Schaltflächen, Logos und Bilder angewendet wird. Manchmal werden jedoch auch Mouseover- und Mouseout-Ereignisse verwendet, JavaScript ist jedoch problematischer . Es wird empfohlen, CSS zu verwenden, wenn es mit CSS gelöst werden kann, was die Leistung verbessern kann. Lassen Sie uns als Nächstes ausführlich über die Verwendung von Hover sprechen.

1. Definition und Verwendung

Definition: Hover kann spezielle Stile hinzufügen, wenn die Maus über den Link bewegt wird.

Verwendung: Selektor: hover{Attribut: Attributwert}
Zum Beispiel:
a:hover{background-color:gelb;}
.aa:hover{color:#FFF; Hintergrund: #0C0;

:Link-Selektor legt den Link-Stil von nicht besuchten Seiten fest,

:Besuchte-Selektor legt den Stil von besuchten Seiten-Links fest

:Aktiver-Selektor legt den Stil fest, wenn Sie auf den Link klicken

Hinweis: Zu Um den gewünschten Effekt zu erzielen, muss :hover nach :link und :visited stehen.

2. Beispiel für die CSS:Hover-Methode

Beispielbeschreibung: Wenn die Maus in das Div eintritt, wird das Div allmählich größer wird größer, zurück zum ursprünglichen Stil. Dies wird mithilfe des CSS-Hover-Ereignisses erreicht. HTML-Teil:

<div class="aa"></div>

CSS-Teil:

.aa{
            width: 100px;
            height: 100px;
            background-color: blue;
            -webkit-transition: transform 2s linear;
            -moz-transition: transform 2s linear;
            -ms-transition: transform 2s linear;
            -o-transition: transform 2s linear;
            transition: transform 2s linear;
        }
        .aa:hover{
            -webkit-transform: scale(2);
            -moz-transform: scale(2);
            -ms-transform: scale(2);
            -o-transform: scale(2);
            transform: scale(2);
        }

Rendering:

Das Bild auf der links ist der Stil vor dem Bewegen der Maus. Das Bild rechts ist der Stil nach dem Bewegen der Maus. Hinweis: Oben wird die Verwendung von CSS:hover vorgestellt, was relativ einfach ist. Es ist zu beachten, dass, wenn der Mauszeiger den Stil von Elementen auf derselben Ebene ändert, sich auch der Stil benachbarter Geschwisterelemente ändert, d. h. der Stil eines Elements kann funktionieren, indem der Mauszeiger darauf angewendet wird gleichzeitig. Verwenden Sie Pseudoklassen, um die Stile anderer Elemente zu ändern. Andere Elemente müssen untergeordnete Elemente des Hover-Elements sein. Hier gibt es keine Demonstration, Sie können es selbst ausprobieren.

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung des CSS:hover-Pseudoklassenselektors (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!