9. Hover

28/03/2013 | |

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;
}