No CSS, o Hover CSS faz parte do conjunto de palavras-chave utilizadas pelas pseudo-classes da linguagem de estilos e serve para adicionar características a um elemento quando a pessoa usuária posiciona o mouse sobre ele. 

Trata-se de um recurso muito utilizado para adicionar diversas funcionalidades em aplicações web, entre elas para construir menus suspensos, alterar as cores dos elementos e muito mais. Para demonstrar o que é possível fazer com esse recurso, preparamos este post que contém os seguintes tópicos:

• O que é a pseudo-classe hover CSS? 
• Qual a sua sintaxe?
• Exemplos de uso da pseudo-classe hover!   
• Qual a compatibilidade com os navegadores?

Continue com a gente e boa leitura!

O que é a pseudo-classe hover CSS? 

Antes de falarmos sobre o efeito hover, é importante entender o que são pseudo-classes. Na prática, elas permitem adicionar características a um elemento quando ocorre um determinado evento, como quando clicamos em um link e a cor do texto é modificada em função disso ou quando atribuímos o focus a um determinado item da página HTML.

O hover, portanto, é uma pseudo-classe que identifica quando o mouse está sobre um elemento e modifica as suas características conforme as atribuições indicadas no código CSS para essa condição.

Qual a sua sintaxe?

Basicamente, devemos utilizar a palavra hover após a indicação do seletor, que pode ser um elemento, uma classe ou a identificação, que corresponde ao ID do elemento. Veja a sintaxe:

seletor:hover {
/* definição das propriedades */
}

Exemplo:

h1:hover {
     color: #fff;
     background-color: green;
}

Nesse caso, quando o mouse passar sobre o elemento

, a cor da fonte será modificada para branco e a cor de fundo para verde.

Exemplos de uso da pseudo-classe hover!   

Nada melhor que a visualização de exemplos práticos para entender como esse recurso funciona. Confira alguns códigos que utilizam o efeito hover, a seguir.

Criando uma galeria com imagens full-size e previews!

No exemplo abaixo, vamos construir uma galeria de imagens em que, ao posicionarmos o mouse sobre uma delas, ela será ampliada na escala de 1.5, o que permite visualizá-la em um tamanho maior. Perceba que criamos uma classe chamada .imagem-responsiva, que permite redimensionar a imagem para que ela não fique distorcida, seja qual for o tamanho da tela do dispositivo.

Na classe .box, indicamos as características do espaço destinado às imagens. Perceba que utilizamos a propriedade transition CSS hover, que faz com que o efeito image hover CSS seja realizado com mais suavidade. Dessa forma, ele fica mais elegante e é melhor percebido pela pessoa usuária da aplicação. Confira o código fonte abaixo: