Entrar Ainda não tem acesso?
2
respostas

[Projeto] Desafio Personalizando com 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 Estudante
| 25.8k xp | 32 posts

Criei uma tag span com uma classe "hover-name" no html para destacar o nome ao passar o mouse:

             <p class="apresentacao__conteudo__texto">Olá! Sou <span class="hover-name">Reziani Martins,
                 </span>
                 desenvolvedora Front-end com especialidade em React, HTML e
                CSS. Ajudo pequenos negócios e designers a
                colocarem em prática boas ideias. Vamos
                conversar?
                </p>

CSS :

.hover-name:hover{
 background-color: #ac5fa3; /* Cor quando passar o mouse */
}
2 respostas
por Rafaela Petelin Silvério
| 651.2k xp | 1434 posts
Alura Scuba Team Monitora de Fórum

Oi, Estudante! Como vai?

Gostei de como você aplicou a classe hover-name para destacar o nome ao passar o mouse. Isso melhora a experiência visual e destaca informações importantes de forma sutil.

Uma sugestão para aprimorar o efeito é adicionar uma transição suave para que a mudança de cor ocorra gradualmente. Veja este exemplo: 


.hover-name {
  transition: background-color 0.3s ease-in-out;
}

.hover-name:hover {
  background-color: #ac5fa3; /* Cor ao passar o mouse */
}

Isso faz com que a cor mude suavemente, tornando o efeito mais agradável.

Obrigada por compartilhar seu código com a comunidade Alura!

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!
por Estudante
| 25.8k xp | 32 posts

Muito Obrigada Rafaela!

.hover-name{
 transition: background-color 0.3s ease-in-out; /*transição suave  para que a mudança de cor ocorra gradualmente*/
}
.hover-name:hover{
  background-color: #ac5fa3; /* Cor ao passar o mouse */
}