Surcape -
Redes Sociais:

Você não está conectado. Conecte-se ou registre-se

[CSS] Seletor :hover

Mensagem - Página 1 de 1

1 [CSS] Seletor :hover em Dom Nov 01, 2015 7:46 pm

avatarDeveloper
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:

Código:
<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.



Após 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.

Código:
<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:


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.


Código:
<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.



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.

2 Re: [CSS] Seletor :hover em Dom Nov 01, 2015 7:59 pm

avatarMembro Ativo
Bom tutorial para iniciantes..

3 Re: [CSS] Seletor :hover em Dom Nov 01, 2015 8:39 pm

avatarParticipativo
n4zun escreveu:Bom tutorial para iniciantes..

4 Re: [CSS] Seletor :hover em Seg Nov 02, 2015 1:50 pm

Administrador

Obrigado! Irá ajudar muito a galera do fórum.

5 Re: [CSS] Seletor :hover em Seg Nov 02, 2015 2:19 pm

avatarParticipativo
nadi0s escreveu:Obrigado! Irá ajudar muito a galera do fórum.


__________________________________

6 Re: [CSS] Seletor :hover em Seg Nov 02, 2015 2:20 pm

avatarParticipativo
Obrigado por compartilhar


__________________________________

Conteúdo patrocinado

Mensagem - Página 1 de 1

Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum