1
resposta

RESOLVIDO [Dúvida] Problema ao adicionar o efeito :hover

No portfólio montado pela Rafaella e o Guilherme, foi adicionado o efeito hover nos botões que levam às redes sociais. Não teve isso nas aulas apresentadas e quando fui procurar no código compartilhado no github sobre a aula, adicionei no meu código no mesmo local em que eles usaram no deles, porém quando salvo a alteração, na minha página, os botões perdem toda formatação feita no meu style.css. Segue minhas linhas do .css:

.apresentacao__links__link {
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 378px;
    text-align: center;
    border: 3px inset #3778FA;
    border-radius: 8px; /*arredondamento da borda*/
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0; /*1o é o horizontal e o 2o o vertical*/
    color: #000000;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
1 resposta

Olá, Arian.

Tudo bem?

Tem no vídeo sim está nessa aula, o nome da aula é "Hover":

https://cursos.alura.com.br/course/html-css-cabecalho-footer-variaveis-css/task/119363

No caso você precisa chamar a mesma classe dos botões e adiciorar dois pontos e a palavra hover :hover, fica assim:

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

Com o resto do código fica:

.apresentacao__links__link{
    /* background-color: #22D4FD; */
    display: flex;
    justify-content: center;
    gap: 16px;
    border: 2px solid #22D4FD;
    width: 378px;
    text-align: center;
    border-radius: 8px;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: #F6F6F6;
    font-family: 'Montserrat', sans-serif;
}
.apresentacao__links__link:hover{
    background-color: #272727;
}

Espero ter ajudado. Qualquer dúvida manda aqui.