Aktives Menü hervorheben
Teil des Abschnitts CSS-Meisterschaft der HTML-Journey von Coddy. Lektion 39 von 43.
Aufgabe
EinfachEin einfaches Navigationsmenü mit vier Links ist gegeben. Deine Aufgabe ist es, es mithilfe von Pseudoklassen interaktiver zu gestalten.
Schreibe CSS, um Folgendes zu tun:
- Ändere die Hintergrundfarbe eines Links, wenn ein Benutzer mit der Maus darüberfährt, in
rgba(50, 168, 82, 1). - Ändere die Textfarbe in Weiß, wenn der Link gerade angeklickt wird.
Probier es selbst
<html>
<head>
<title>Highlight Active Menu</title>
<style>
nav a {
padding: 10px;
text-decoration: none;
color: black;
}
/* Add your styles here */
</style>
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#" class="active">Blog</a>
<a href="#">Contact</a>
</nav>
</body>
</html>
Alle Lektionen in CSS-Meisterschaft
1Selektoren-Meisterschaft – Kombinationen
EinführungNachfahren-SelektorKind-SelektorDirekter Nachbar-SelektorAllgemeiner Geschwister-SelektorWiederholungs-Challenge4Projekt: Dropdown-Menü
Das Untermenü hinzufügenDas Untermenü anzeigenWeiteres StylingInput und Button7Erstellen mit CSS Grid
Grid-GrundlagenGrid-row ElementplatzierungBenannte BereicheWiederholungs-Challenge2Interaktive Pseudoklassen
PseudoklassenHover-EffekteFokus-EffekteAktiv-StylesWiederholungs-Challenge3Strukturelle Pseudoklassen
Strukturelle PseudoklassenDas erste Kind-Element ansprechenDas letzte Kind-Element ansprechenMuster-Power: nth-child nutzenWiederholungs-Challenge6Landing Page
Header-Bereich stylenDen Button stylenSektions-LayoutCard-LayoutDen letzten Schliff hinzufügen9Abschluss-Herausforderungen
Aktives Menü hervorhebenZebra-TabellenzeilenButton-Hover-EffektGrid-Card-LayoutVerschwommenes Hero-ImageÜbe selbstständig: Web-Playground