Solucionado
Existe alguma diferença entre os resultados dos códigos abaixo?
/* solução na aula*/
.saudacao:hover em {
animation-play-state: paused;
}/*minha solução*/
.saudacao em:hover {
animation-play-state: paused;
}Com a minha solução pareceu que o resultado ficou do jeito esperado na página, então é mais para confirmar se tem algum problema ou poderia dar errado em outra situação.
hoje, com a Alura e o Google Gemini
Oi, Bárbara, tudo bem?
É uma observação interessante. Quando utilizo o :hover e as psedou-classes, eu utilizo na forma que o professor pôs no código, é a padrão e a mais usual. (https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_hover_dropdown). Porém, da sua forma também funciona. Acho que é mais interessante utilizar a forma padrão, que é:
seletor:pseudo-classe{
propriedade: valor;
}Espero ter te ajudado!
Boa noite, Bárbara! Como vai?
Só pra acrescentar uma pequena informação, pois a resposta da Lais já foi excelente!
A diferença entre as soluções é que no seu caso o usuário teria que passar o mouse exatamente sobre o em! Enquanto que na solução da aula poderia passar o mouse sobre qualquer parta do elemento com a classe .saudacao. Ou seja, supondo que seja um caso onde o em tem um tamanho menor do que o tamanho do elemento com a classe .saudacao, então na sua solução o usuário teria uma área menor para passar o mouse. Sendo assim, dependendo da situação pode ser que o local onde vc coloque o :hover faça diferença no final das contas.
Pegou a ideia? Qualquer coisa é só falar!
Grande abraço e bons estudos, meu aluno!
Obrigada pelas respostas rápidas, pessoal!
Gabriel, na verdade eu achei que a intenção era justamente poder passar o mouse só em cima do em, já que o elemento saudação era muito mais extenso. Mas ficou clara a diferença!