Destacar Menu Ativo
Parte da seção CSS Mastery do Journey de HTML da Coddy. Lição 39 de 43.
Desafio
FácilUm menu de navegação simples é fornecido com quatro links. Sua tarefa é torná-lo mais interativo usando pseudo-classes.
Escreva o CSS para:
- Alterar a cor de fundo de um link quando um usuário passar o mouse sobre ele para
rgba(50, 168, 82, 1). - Alterar a cor do texto para white quando o link estiver sendo clicado ativamente.
Experimente você mesmo
<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>
Todas as lições de CSS Mastery
1Domínio de Seletores – Combinação
IntroduçãoSeletor de DescendenteSeletor de FilhoSeletor de Irmão AdjacenteSeletor de Irmão GeralDesafio de Recapitulação7Construa com CSS Grid
Fundamentos do GridPosicionamento de Itens com Grid-rowÁreas NomeadasDesafio de Revisão2Pseudo-classes Interativas
Pseudo-classesEfeitos de HoverEfeitos de FocoEstilos AtivosDesafio de Recapitulação3Pseudo-classes estruturais
Pseudo-classes estruturaisSelecionando o primeiro filhoSelecionando o último filhoO poder dos padrões: Usando nth-childDesafio de recapitulação6Landing Page
Estilizar a seção do cabeçalhoEstilizar o botãoLayout da seçãoLayout de cardAdicionar toques finais9Desafios Finais
Destacar Menu AtivoLinhas de Tabela ZebradasEfeito Hover em BotõesLayout de Cards em GridImagem Hero DesfocadaPratique por conta própria: Playground de Web