English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
O pseudo-classe :hover CSS é aplicável às situações em que o usuário usa um dispositivo de indicação para apontar um elemento (sem ativá-lo). Este estilo será sobrescrito por qualquer pseudo-classe relacionada ao link, como :link, :visited e :active. Para garantir que funcione, as regras :hover devem estar após as regras :link e :visited, mas antes das regras :active, declaradas na ordem LVHA: :link - :visited - :hover - :active. O pseudo-classe :hover pode ser usado em qualquer pseudo-elemento.
Manual completo de seletores CSS
O estilo do link ao mover o mouse sobre ele é definido:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial básico(oldtoolbag.com)</title>
<style>
a:active
{
background-color:lightgreen;
}
</style>
</head>
<body>
<a href="//pt.oldtoolbag.com">oldtoolbag.com</a>
<a href="//www.pcjson.com" target="_top">pcjson.com</a>
<p><b>Atenção:</b> Quando o mouse se move sobre a conexão :hover o estilo do seletor liga ao hiperlink.</p>
</body>
</html>Teste e veja ‹/›Estilo especial adicionado ao :hover quando o mouse está sobre o link.
Aviso: O seletor :hover pode ser usado em todos os elementos, não apenas em links.
Aviso: :link O seletor define o estilo do link não visitado, :visited O seletor define o estilo do link visitado.:activeConfiguração do seletor de estilo ao clicar no link.
Atenção: Para obter o efeito esperado, no CSS, o :hover deve estar após o :link e :visited!!
Os números na tabela indicam a primeira versão do navegador que suporta essa propriedade.
| Selector | |||||
|---|---|---|---|---|---|
| :hover | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
Atenção:Deve ser declarado no IE !DOCTYPE para garantir que o seletor :hover funcione corretamente.
Tutorial CSS: Links CSS
Tutorial CSS: Pseudo-classes CSS
Links ativos, visitados, não visitados ou quando há mouse sobre eles:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial básico(oldtoolbag.com)</title>
<style>
a:link {color:green;}
a:visited {color:green;}
a:hover {color:red;}
a:active {color:yellow;}
</style>
</head>
<body>
<p>Coloque o mouse sobre e clique neste link: <a href="//pt.oldtoolbag.com/">oldtoolbag.com</a></p>
</body>
</html>Teste e veja ‹/›Estilos de links com diferentes estilos:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial básico(oldtoolbag.com)</title>
<style>
a.ex1:hover,a.ex1:active {color:red;}
a.ex2:hover,a.ex2:active {font-size:150%;}
a.ex3:hover,a.ex3:active {background:red;}
a.ex4:hover,a.ex4:active {font-family:monospace;}
a.ex5:visited,a.ex5:link {text-decoration:none;}
a.ex5:hover,a.ex5:active {text-decoration:underline;}
</style>
</head>
<body>
<p>Coloque o mouse sobre o link para ver a mudança de estilo.</p>
<p><a class="ex1" href="/css/">Mudar a cor deste link</a></p>
<p><a class="ex2" href="/css/">Mudar o tamanho da letra deste link</a></p>
<p><a class="ex3" href="/css/">Mudar a cor de fundo deste link</a></p>
<p><a class="ex4" href="/css/">Mudar o tipo da letra deste link</a></p>
<p><a class="ex5" href="/css/">Mudar a destilação do texto deste link</a></p>
</body>
</html>Teste e veja ‹/›