1
resposta

Hover não funciona

Hello!

Tentei aplicar as sugestões do instrutor, acrescentando o hover no rodape e nos tópicos e não está a funcionar. Tenho de colocar dentro da media query do 1024px ou 1728px? Tenho de usar combinadores?

O que estaria fazendo errado?

O projeto está em: https://github.com/simsousol/alurabook

1 resposta

Oi, Maíra, tudo bem?

No seu rodapé a pseudo-classe :hoverfoi aplicada corretamente, pois ao passar o mouse por cima de cada um dos itens eles mudam de cor para uma tonalidade alaranjada. Contudo, no caso dos tópicos que fazem parte da divisão acima, eles não apresentam a pseudo-classe. Para isso podemos adicionar o seguinte código:

.tópicos__link:hover {
color: var(--laranja);
background-color: var(--branco);
}

Esse código não precisa estar inserido dentro de um media-query, pois como o projeto está sendo construído em mobile first a partir do tamanho mínimo todas as telas com dimensões superiores ao padrão estabelecido para dispositivos mobile, manterão a funcionalidade do aplicada ao :hover. No caso do código acima, ele modifica a cor do texto para laranja e a cor de fundo dos retângulos para branco.

Caso queira mais informações sobre essa pseudo-classe, recomendo a leitura da documentação abaixo:

Espero ter ajudado. Caso tenha dúvidas, não hesite em postar no fórum.

Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!