Essa lição é bem simples, muito mesmo e é uma das mais importantes que você vai ver por aí, pois o hover está em toda parte e faz muita diferença nas coisas. Primeiro, vamos ao conceito dessa propriedade. O hover é como o elemento vai parecer quando colocamos o mouse por cima, vocês já devem ter visto vários locais do tipo sidebars que ao passar o mouse mudam a cor da borda. O hover vai de imagens até simples textos com essa característica, pode mesmo ser usado em qualquer coisa.
Veja como essa função entra em funcionamento:
.seletor {propriedade: valor;}.seletor:hover {propriedade: valor;}
Então é bem simples. Vamos supor que queremos hover em uma borda, então ficaria desse jeitinho:
.sidebar {border: solid 1px #ffccff;}.sidebar:hover {border: solid 1px #fff;}
Repare bem e você vai notar que o nosso hover será trabalhado na cor da borda, então quando passamos o mouse sobre a tal sidebar, a cor muda. É óbvio que o seletor é apenas um exemplo. Acho que deu para entender como funciona o hover e o que se pode fazer, mas ainda falta uma coisa.
- Hover com transição lenta?
Fazendo o tutorial acima o hover vai funcionar, mas vocês já devem ter notado que algumas pessoas possuem elementos com um hover lento, que muda mais delicadamente. Para fazer isso apenas adicione o seguinte código antes de }, tanto no primeiro quanto no segundo:
-webkit-transition-duration: .50s;
Se necessário, troque o cinquenta por um número maior ou menor. No fim, ficará dessa forma ou parecido:
.sidebar {
border: solid 1px #ffccff;
-webkit-transition-duration: .50s;
}
.sidebar:hover {
border: solid 1px #fff;
-webkit-transition-duration: .50s;
}