Wyróżnianie aktywnej pozycji menu
Część sekcji Mistrzowskie opanowanie CSS ścieżki HTML w Coddy. Lekcja 39 z 43.
Wyzwanie
ŁatwyDostępne jest proste menu nawigacyjne z czterema linkami. Twoim zadaniem jest zwiększenie jego interaktywności za pomocą pseudoklas.
Napisz kod CSS, który:
- Zmienia kolor tła linku na
rgba(50, 168, 82, 1), gdy użytkownik najedzie na niego kursorem. - Zmienia kolor tekstu na biały, gdy link jest aktywnie klikany.
Spróbuj swoich sił
<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>
Wszystkie lekcje w sekcji Mistrzowskie opanowanie CSS
1Opanowanie selektorów – łączenie
WprowadzenieSelektor potomkaSelektor dzieckaSelektor sąsiadującego rodzeństwaSelektor ogólnego rodzeństwaWyzwanie podsumowujące7Twórz za pomocą CSS Grid
Podstawy GridRozmieszczanie elementów w wierszach siatkiNazwane obszaryWyzwanie podsumowujące2Interaktywne pseudoklasy
PseudoklasyEfekty najechania kursoremEfekty fokusuStyle aktywneWyzwanie podsumowujące3Strukturalne pseudoklasy
Strukturalne pseudoklasyWybieranie pierwszego elementu potomnegoWybieranie ostatniego elementu potomnegoMoc wzorców: użycie nth-childWyzwanie podsumowujące9Wyzwania końcowe
Wyróżnianie aktywnej pozycji menuNaprzemienne kolory wierszy tabeliEfekt najechania na przyciskUkład kart w siatceRozmyty obraz głównyPoćwicz samodzielnie: Edytor online Web