Oi! Tenho uma dúvida: por que "cursor" e "transition" foram colocados em ".enviar" e não em ".enviar:hover"? Afinal, estas não são características que surgem quando passamos o mouse em cima (hover)?
Oi! Tenho uma dúvida: por que "cursor" e "transition" foram colocados em ".enviar" e não em ".enviar:hover"? Afinal, estas não são características que surgem quando passamos o mouse em cima (hover)?
Oi, Pedro, tudo bem?
A propriedade cursor
estiliza a forma como você quer que o ponteiro do mouse fique em cima do elemento, então, independente do hover
, ele pode ser usado. Já o transition
é justamente o que ele que faz uma transição (de 1 segundo para todo o elemento all
) do estilo que está em .enviar
para .enviar:hover
Olá Pedro, tudo bem com você?
Parte da sua pergunta foi algo que eu nunca pensei, mas que ao mesmo tempo faz muito sentido ahahahhaha
Que é o cursor: pointer
não ser colocado no :hover
, obviamente o comportamento de ambos é o mesmo, e eu particularmente até hoje só vi esse comportamento ser colocado no próprio elemento, e eu acredito que por um lado faz sentido, esse efeito de ser clicável me parece ser inerente ao botão, e passar o mouse ser uma consequência, mas sinceramente é mais uma filosofia isso, no final das contas da no mesmo, mas o comum é ver no próprio botão
O argumento mais sólido que eu teria, e nem é tanto assim, é que as vezes os navegadores podem ter alguns bugs com :hover
, :active
, mas são coisas simples e rapidamente eles fazem o update
Agora o transition
não, o padrão é ver ele sempre sendo aplicado no elemento que vai sofrer essa transição, e semanticamente faz mais sentido, pois podemos ter diversos efeitos dentro de um botão, seja pelo :hover
, quando pelo clique de um botão que adiciona uma classe via javascript por exemplo .ativo
, quanto pela responsividade ( que será abordado nos outros cursos)
Então quando você vê algo como:
.meu-botao {
transition: width 2s ease-in-out;
}
Você já sabe que de alguma forma que esse elemento vai sofrer uma transição não importa como, então o programador frontend já tem uma ideia de cara, também facilita quando estamos debugando pelo console do navegador, se ele estiver dentro de uma classe, ou de um :hover
fica bem mais complicado de descobrir essa mudança
Então no geral é isso, o transition
faz todo sentido estar sempre no elemento para ser expressivo, o cursor
vai ter o mesmo efeito, mas o comum é ver dentro do elemento :P
Abraços!
Muitíssimo obrigado pelas respostas! Abraços :