Evidenziare il menu attivo
Fa parte della sezione Padronanza di CSS del percorso HTML di Coddy. Lezione 39 di 43.
Sfida
FacileÈ dato un semplice menu di navigazione con quattro link. Il tuo compito è renderlo più interattivo usando le pseudoclassi.
Scrivi CSS per:
- Cambiare il colore di sfondo di un link quando l'utente ci passa sopra con il puntatore in
rgba(50, 168, 82, 1). - Cambiare il colore del testo in bianco mentre si fa clic attivamente sul link.
Provalo tu
<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>
Tutte le lezioni di Padronanza di CSS
1Padronanza dei selettori – Combinazioni
IntroduzioneSelettore discendenteSelettore figlioSelettore fratello adiacenteSelettore fratello generaleSfida di ripasso2Pseudo-classi interattive
Pseudo-classiEffetti al passaggio del mouseEffetti di focusStili attiviSfida di riepilogo3Classi pseudo-strutturali
Classi pseudo-strutturaliSelezionare il primo figlioSelezionare l'ultimo figlioIl potere degli schemi: usare nth-childSfida di riepilogo6Pagina di destinazione
Stilizzare la sezione dell’intestazioneStilizzare il pulsanteLayout delle sezioniLayout delle schedeAggiungere gli ultimi ritocchi9Sfide finali
Evidenziare il menu attivoRighe alternate nella tabellaEffetto hover sul pulsanteLayout a griglia per schedeImmagine hero sfocataEsercitati da solo: Playground Web