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

[Projeto] 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 João Victor Ferreira Lima Santos
| 49k xp | 10 posts
Estagiário

class:

<div class="apresentacao__links">
                <h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
                <a class="apresentacao__links__link" href="www.instagram.com/joaovf__/"> <img src="./assets/insta.png" class="icone_aplicativos" alt="ícone instagram"> Instagram</a> <!--botão ancora-->
                <a class="apresentacao__links__link" href="https://github.com/joaoferreiral"><img src="./assets/git.png" class="icone_aplicativos" alt="ícone github">Github</a>
                <a class="apresentacao__links__link" href="https://www.linkedin.com/in/joãoferreiral/"> <img src="./assets/linkedin1.png" class="icone_aplicativos" alt="ícone linkedin"> LinkedIn</a>
            </div>

CSS:

.apresentacao__links__link:hover {
    background-color: #272727;
}
1 resposta
solução!
por Renan Lima
| 3708.1k xp | 7842 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, João.

Tudo bem?

Muito obrigado por compartilhar com a gente. O código CSS que você postou está correto e deve funcionar. Quando o mouse passar por cima dos links, o fundo deve ficar da cor #272727.

Uma sugestão para deixar o efeito mais interessante seria adicionar uma transição suave, para que a mudança de cor não seja brusca. Você pode fazer isso adicionando a propriedade "transition" ao seu CSS, como no exemplo abaixo:

.apresentacao__links__link {
    transition: background-color 0.3s ease;
}

.apresentacao__links__link:hover {
    background-color: #272727;
}

Dessa forma, a mudança de cor acontecerá de forma suave em 0.3 segundos.

Espero ter ajudado e bons estudos!