:hover

Oi, Natan, tudo bem?

Comecei a modificar algumas coisas no teu CSS. Mas preciso analisar melhor, ainda hoje ou amanhã publico aqui a resolução, certo?

Até.

Olá Lais, tudo sim e com você?

Tranquilo, estou procurando outras formas por enquanto.

Até.

Cara. Boa noite. Se me permite lhe dar uma sugestão. Veja o curso web design responsivo. Lá ele fala sobre o hover. Se me permite dar mais uma sugestão. Hje não existe mais hover. Quer dizer. O uso dele ou do :focus, num site deixa ele "menos responsivo," as vezes vó e consegue outras formas mais bonitas de embelezar teu estilo

Oi, Natan, voltei aqui. Consegui fazer o que tu pediu mas do jeito que sei fazer e tentando ao máximo não mexer muito no teu código original. Vamos lá.

Sobre a imagem, tem o truque do position absolute que coloquei na imagem com class: hover. Usei o opacity + display+ z-index e deu certo.

Sobre a cor, eu nunca usei e nem vi nada do data-active-color, então, eu fiz do jeito que sabia, utilizei a sua ID para as seções e mudei a cor, mas só mudei de uma, é só seguir a lógica pras demais.

Com certeza há um forma muito melhor de fazer essa troca de imagem mais limpa e simples. Porém o uso de links na html complicou um pouco...

Eu adicionei algumas classe em tags do HTML, acredito ser uma boa prática ao uso das tag puras no CSS. E isso pode acarretar num problema de grau de especificidade no CSS. Já ouviu falar? Quando tu passa o mouse num código de estilo no arquivo CSS, ele mostra o quanto aquela sua marcação tem de prioridade em detrimento dos outros. É algo que precisa ser muito observado, por que as vezes ficamos tentando aplicar um estilo em determinada tag, classe, id... e, simplesmente, não vai. As vezes pode ser algo que está sendo sobreposto...

Esse texto explica melhor: https://developer.mozilla.org/pt-BR/docs/Web/CSS/Specificity

Mandei o código CSS e HTML no teu GitHub. Desculpa se não consegui fazer melhor, mas também não invadir demais o seu código e ficar muito diferente do que projeto que já está em andamento.

E sobre o que o Daniel falou eu não tenho uma opinião formada.

Me diz se deu certo? :}}

Boa noite Lais, tudo bem?

muito obrigado pela ajuda e explicação, garanto que serão bem uteis em meu crescimento, em relação ao código, da forma que me mostrou consegui resolver uma boa parte que seria a mudança da cor e também do link, em relação as imagens ainda não consegui mas novamente agradeço muito o auxilio :DD

Oi, Natan, não conseguiu o que da imagem? Pode falar que tento de novo :}

Aqui no meu código quando passo o mouse mudou direitinho pro branco. Ai no caso, ele fica trocando.

Então, ele só nao mudou a imagem. Estou revendo o código para ver se não tem algo que está com um grau maior que está impedindo que aconteça