[Projeto] Hover | HTML e CSS: cabeçalho, footer e variáveis CSS

Solucionado (ver solução)

Solucionado
(ver solução)

1
resposta

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

| 2931.2k xp | 6094 posts

Instrutor Scuba Team

28/04/2023

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!