Menu
Coddy logo textTech
COMEÇAR A APRENDER
flag Pt iconPortuguêsdown icon

Destacar Menu Ativo

Parte da seção CSS Mastery do Journey de HTML da Coddy — lição 39 de 43.

challenge icon

Desafio

Fácil

Um menu de navegação simples é fornecido com quatro links. Sua tarefa é torná-lo mais interativo usando pseudo-classes.

Escreva o CSS para:

  1. Alterar a cor de fundo de um link quando um usuário passar o mouse sobre ele para rgba(50, 168, 82, 1).
  2. 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ção

4Projeto de Menu Dropdown

Adicionar o submenuExibir o submenuMais estilizaçãoInput e botão

7Construa com CSS Grid

Fundamentos do GridPosicionamento de Itens com Grid-rowÁreas NomeadasDesafio de Revisão

2Pseudo-classes Interativas

Pseudo-classesEfeitos de HoverEfeitos de FocoEstilos AtivosDesafio de Recapitulação

5Efeitos visuais

GradientesFiltros CSSTransformaçõesTransições e Efeitos de HoverDesafio de Revisão

8Site Flavor Fiesta

Configurando o gridCabeçalhoA parte principalRodapé

3Pseudo-classes estruturais

Pseudo-classes estruturaisSelecionando o primeiro filhoSelecionando o último filhoO poder dos padrões: Usando nth-childDesafio de recapitulação

6Landing Page

Estilizar a seção do cabeçalhoEstilizar o botãoLayout da seçãoLayout de cardAdicionar toques finais

9Desafios Finais

Destacar Menu AtivoLinhas de Tabela ZebradasEfeito Hover em BotõesLayout de Cards em GridImagem Hero Desfocada