Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Poderia fazer o hover do link diferente?

Referente ao curso CSS: explorando seletores e utilizando variáveis, no capítulo Variáveis CSS e atividade Finalizando a animação dos links

por Fernanda Grendene Pacheco
| 41.3k xp | 5 posts

Eu acrescentei as imagens dentro da tag , como no exemplo


 <li class="banho-e-tosa">
          <a class="link" href="#"><img src="./assets/icones/banho-e-tosa.png" alt="Imagem banho e tosa">Banho e Tosa</a>
        </li>

e no CSS fiz assim: 

    .link img{;
    position: relative;
    top:25px;
    right:5px;
    display:none;
       
}


.link:hover img{
    display: initial;
    transition: display 0.8s;
}

Estaria errado? Estou fazendo mais cursos para praticar mesmo. Mas não tenho idéia do que se ve profissionalmente. Queria aprender a fazer da maneira mais usada...

3 respostas
solução!
por Yuri Fernandes Faustino Reis
| 82.3k xp | 40 posts

Olá, Fernanda! Tudo bom?!

De forma alguma, você não está errada! Na nossa área, tecnologia existe vários caminhos e diversas formas de chegar no mesmo resultado. Seu código está muito bem estruturado e organizado.

Sobre o código, uma solução alternativa para o error do css sobre o display, uma solução seria você usar o opacity.

O motivo da mudança se dá devido que o css não permite animar propriedades como display, por isso o transition: display 0.8s; não funciona, pois ela muda instantaneamente de none para block. 

.link img {
    position: relative;
    top: 25px;
    right: 5px;
    opacity: 0; /* Invisível */
    pointer-events: none; /* Evita interação quando oculto */
    transition: opacity 0.8s ease; /* Animação suave */
}

.link:hover img {
    opacity: 1; /* Visível */
    pointer-events: auto; /* Permite interação */
}

Qualquer dúvida, estou a disposição!

por Fernanda Grendene Pacheco
| 41.3k xp | 5 posts

Muito obrigada!!! Eu tinha essa dúvida mesmo sobre display, mas não sabia como procurar a resposta kkkk. Muito obrigada mesmo!

por Yuri Fernandes Faustino Reis
| 82.3k xp | 40 posts

Por nada! Fico feliz em ajudar!

Qualquer dúvida sobre front-end, estou a disposição!

Tenha um bom dia!