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
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:
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!
Was ist CSS Grid?Apr 30, 2025 pm 03:21 PMCSS Grid ist ein leistungsstarkes Tool zum Erstellen komplexer, reaktionsschneller Weblayouts. Es vereinfacht das Design, verbessert die Zugänglichkeit und bietet mehr Kontrolle als ältere Methoden.
Was ist CSS Flexbox?Apr 30, 2025 pm 03:20 PMIn Artikel wird CSS Flexbox erörtert, eine Layoutmethode zur effizienten Ausrichtung und Verteilung des Raums in reaktionsschnellen Designs. Es erklärt die Verwendung von Flexbox, vergleicht es mit CSS -Gitter und Details Browser -Unterstützung.
Wie können wir unsere Website mit CSS reagieren?Apr 30, 2025 pm 03:19 PMIn dem Artikel werden Techniken zum Erstellen von reaktionsschnellen Websites mithilfe von CSS erörtert, einschließlich Ansichtsfenster -Meta -Tags, flexiblen Gitter, Flüssigkeitsmedien, Medienabfragen und relativen Einheiten. Es deckt auch mit CSS -Raster und Flexbox zusammen und empfiehlt CSS -Framework
Was macht die CSS-Box-Größeneigenschaft?Apr 30, 2025 pm 03:18 PMIn dem Artikel wird die CSS-Box-Größeneigenschaft erörtert, in der die Berechnung der Elementabmessungen steuert. Es erklärt Werte wie Inhaltsbox, Border-Box und Padding-Box sowie deren Auswirkungen auf das Layout-Design und die Form von Formularausrichtung.
Wie können wir mit CSS animieren?Apr 30, 2025 pm 03:17 PMIn Artikel wird das Erstellen von Animationen mithilfe von CSS, Schlüsseleigenschaften und Kombination mit JavaScript erläutert. Hauptproblem ist die Browserkompatibilität.
Können wir mit CSS 3D -Transformationen zu unserem Projekt hinzufügen?Apr 30, 2025 pm 03:16 PMIn Artikel werden CSS für 3D -Transformationen, wichtige Eigenschaften, Browserkompatibilität und Leistungsüberlegungen für Webprojekte erläutert. (Charakterzahl: 159)
Wie können wir Gradienten in CSS hinzufügen?Apr 30, 2025 pm 03:15 PMIn dem Artikel werden CSS -Gradienten (linear, radial, wiederholt) beschrieben, um die Website -Visuals, das Hinzufügen von Tiefe, Fokus und moderne Ästhetik zu verbessern.
Was sind Pseudoelemente in CSS?Apr 30, 2025 pm 03:14 PMIn Artikel werden Pseudoelemente in CSS, deren Verwendung bei der Verbesserung des HTML-Stylings und der Unterschiede zu Pseudoklassen erläutert. Bietet praktische Beispiele.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
DVWA
Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software
Sicherer Prüfungsbrowser
Safe Exam Browser ist eine sichere Browserumgebung für die sichere Teilnahme an Online-Prüfungen. Diese Software verwandelt jeden Computer in einen sicheren Arbeitsplatz. Es kontrolliert den Zugriff auf alle Dienstprogramme und verhindert, dass Schüler nicht autorisierte Ressourcen nutzen.
SublimeText3 Linux neue Version
SublimeText3 Linux neueste Version
Dreamweaver CS6
Visuelle Webentwicklungstools
PHPStorm Mac-Version
Das neueste (2018.2.1) professionelle, integrierte PHP-Entwicklungstool
