eu usei o "hover:animate-sino" na tag "li" sem utilizar o group, assim a animação ficou individual para cada elemento, achei bem mais bonita a interação desde que o elemento so mexe o que eu estou interagindo
eu usei o "hover:animate-sino" na tag "li" sem utilizar o group, assim a animação ficou individual para cada elemento, achei bem mais bonita a interação desde que o elemento so mexe o que eu estou interagindo
Olá Alerrandro! Tudo bem?
Que ótimo que você encontrou uma solução que te agrada visualmente! A ideia de aplicar a animação diretamente no elemento que está sendo interagido é uma abordagem interessante, pois proporciona um feedback visual imediato e individualizado.
A título de curiosidade, no contexto do exercício, a intenção era aplicar a animação do sino nos elementos filhos quando o elemento pai estivesse no estado de hover. Isso geralmente é feito utilizando a classe group do Tailwind CSS, que permite aplicar estilos aos elementos filhos quando o elemento pai é interagido.
Para complementar o aprendizado de acordo com a proposta do exercício, você poderia fazer algo assim:
group ao elemento pai que deve controlar o hover.group-hover:animate-sino.Por exemplo, no seu código, ficaria assim:
<ul class="flex gap-3 mb-4 group">
<li><a class="group-hover:animate-sino hover:font-bold hover:text-primary" href="#">Linkedin</a></li>
<li><a class="group-hover:animate-sino hover:font-bold hover:text-primary" href="#">Email</a></li>
<li><a class="group-hover:animate-sino hover:font-bold hover:text-primary" href="#">Github</a></li>
</ul>
Dessa forma, quando você passar o mouse sobre a lista (ul), todos os links (li) dentro dela serão animados.
Parabéns pela sua ddicação nessa solução!
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!