Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

"cursor" e "transition" no 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)?

3 respostas

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

solução!

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 :