Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Personalizacao do meu menu hover

Referente ao curso HTML e CSS: cabeçalho, footer e variáveis CSS, no capítulo Criando ícones clicáveis e atividade Desafio: personalizando com o Hover

por Valentina Ivanedy De Sousa Cardozo
| 27.4k xp | 104 posts

Decidi personalizar o menu queu eu acabei adiantando no codigo:

html:

<header class="menu">
   <nav>
     <ul>
       <li><a href="#">Inicio</a></li>
       <li><a href="#">Produtos</a></li>
       <li><a href="#">Especialidades</a></li>
     </ul>
   </nav>
 </header>

css

/*header*/
.menu nav ul {
   justify-content: center;
   display: flex;             
   list-style: none; 
   padding: 0;
   margin: 0;
   gap: 20px;                  
 }

 .menu nav li{
   list-style: none;
 }

 .menu nav a {
   display: inline-block;
   text-decoration: none;
   padding: 10px 18px;
   border-radius: 5px;
   color: #6A5952;
   background-color: transparent;
   transition: color 0.3s ease;
 }

 .menu nav a:hover {
   color: var(--marrom-link);
 }
1 resposta
solução!
por Lorena Garcia
| 10964.6k xp | 16211 posts
Alura Scuba Team

Oi, Valentina! Como vai?

Gostei de como você aplicou transition no hover pra suavizar a mudança de cor, isso deixa o menu mais agradável visualmente. O uso de gap também ajuda bastante na organização dos itens.

Uma dica interessante para o futuro é adicionar uma mudança de fundo suave junto com a cor do texto para destacar melhor o item selecionado: 


.menu nav a:hover {
    color: var(--marrom-link);
    background-color: rgba(106, 89, 82, 0.1);
    transition: all 0.3s ease;
}

Esse código muda também o fundo quando o mouse passa, mantendo a suavidade da transição.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!