Desenvolvimento - HTML

Entendendo a pseudoclasse Hover

Neste artigo irei mostrar um pouco do que pode ser feito com a pseudoclasse :hover veremos também do que se trata ela.

por Ricardo Arrigoni


Olá pessoal, neste artigo iremos falar um pouco sobre a pseudoclasse “hover”.

O atributo hover é aquele usado quando passamos o cursor do mouse por cima de algum elemento na página html, e com isso aplicamos estilos sobre ele.

Ao longo desse tutorial iremos ver que realmente é muito simples trabalhar com esse elemento, mas é preciso tomar alguns cuidados na sua estilização, para que não ocorram alguns bugs ou erros.

O elemento hover é muito utilizado em links e menus de navegação, o que não quer dizer que ele não possa ser utilizado outras coisas.

Seu funcionamento é bem simples, vamos ao exemplo:

Para isso pegamos um link qualquer, simples em html e sem estilização nenhuma, como mostra o código abaixo:

Listagem 1 : Link simples sem estilização

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pseudoclasse Hover</title>
</head>
<body>

<a href="http://www.google.com.br">Link para o site do Google</a>
<br /><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</body>
</html>

Sem estilo nenhum, o link irá ficar receber o padrão do navegador de internet ou de algum estilo que você tenha usado anteriormente em algum link, mas no nosso exemplo ele está sem estilo nenhum e apenas no padrão do navegador, sua aparência será como a Figura 1.

Link sem estilização

Figura 1: Link sem estilização

Após o isso, iremos aplicar um efeito sobre esse link, para isso iremos usar a pseudoclasse hover, vamos criar um estilo css inline no próprio documento html para facilitar a leitura e entendimento.

Nesse link, iremos mudar sua cor para preto e remover o sublinhado dele, deixando assim mais discreto o link.

Listagem 2: Removendo estilização padrão do navegador

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pseudoclasse Hover</title>
<style type="text/css">
a{
	text-decoration:none;
	color:#000;
	}

</style>
</head>

<body>
<a href="http://www.google.com.br">Link para o site do Google</a>

<br /><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

Após isso, o link deverá ficar da seguinte forma no navegador:

Link sem estilização padrão

Figura 2: Link sem estilização padrão

Agora o que queremos é aplicar o efeito hover nesse link, para quando passarmos o mouse em cima dele, ele mudar sua aparência.

Para usar uma pseudoclasse é muit simples, basta acrescentarmos o :hover após o elemento que queremos estilizar, vamos ver como fica o código.

Listagem 3: Aplicando o :hover

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pseudoclasse Hover</title>
<style type="text/css">
a{
	text-decoration:none;
	color:#000;
	}
a:hover{
	text-decoration:underline;
	color:#F00;
	text-transform:uppercase;
	}
</style>
</head>

<body>
<a href="http://www.google.com.br">Link para o site do Google</a>
<br /><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

Com o efeito aplicado na Listagem 3, nosso link deverá ficar sublinhado, com a cor vermelha e com todas as letras em caixa alta, quando passado o mouse sobre ele, como mostra a Figura 3.

Link com estilização da pseudoclasse hover

Figura 3: Link com estilização da pseudoclasse hover

Podemos colocar qualquer efeito css nesse link agora por meio da pseudoclasse :hover, vocês podem testar diversas combinações como negrito, outras cores, além de podermos utilizar imagens, trocando assim um backgroud de um determinado elemento por exemplo.

Lembrando que a pseudoclasse hover não serve somente para links, podem ser usadas em listas <li>, entre outros.

Espero que tenham gostado e até o próximo artigo.
Ricardo Arrigoni

Ricardo Arrigoni - Especialista em SEO com mais de 7 anos de experiência. Para consultorias em SEO visite meu site: www.ricardoarrigoni.com.