Pseudo-classe CSS :hover
Use a pseudo-classe CSS :hover para aplicar estilos ao link ou ao elemento sobre o qual passa o rato. Saiba mais sobre a pseudo-classe e experimente os exemplos.
A pseudo-classe :hover seleciona e aplica estilos ao elemento sobre o qual se passa o rato. É despoletada quando o utilizador move o ponteiro do rato por cima dele. Passar o rato não exige ativar o dispositivo apontador.
A pseudo-classe :active pode coexistir com :hover. Quando ambas se aplicam, :active tem precedência devido à ordem da cascata, em vez de substituir rigorosamente :hover.
Muitos dispositivos táteis não suportam :hover porque não têm um estado de hover persistente; tocar num elemento normalmente despoleta :active ou :focus em vez disso.
Para uma melhor acessibilidade, recomenda-se aplicar os mesmos estilos a :focus juntamente com :hover. Para garantir que os estilos só se aplicam em dispositivos que suportam hover, envolva as suas regras em @media (hover: hover) { ... }.
Versão
Sintaxe
Sintaxe CSS :hover
:hover {
css declarations;
}Exemplo da pseudo-classe :hover:
Exemplo da pseudo-classe CSS :hover
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:hover {
background-color: #8ebf42;
color: #666;
}
</style>
</head>
<body>
<h2>:hover selector example</h2>
<a href="https://www.w3docs.com/">W3docs.com</a>
</body>
</html>Passe o rato sobre os links para ver como a cor muda.
Exemplo da pseudo-classe :hover com a tag <a>:
Exemplo de código CSS :hover com um link
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a {
color: #1c87c9;
}
a:hover {
background-color: #555;
color: #eee;
}
</style>
</head>
<body>
<h2>:hover selector example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and <a href="#">typesetting</a> industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into <a href="#">electronic</a> typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <a href="#">Aldus PageMaker</a> including versions of Lorem Ipsum.</p>
</body>
</html>Exemplo da pseudo-classe :hover com a tag <div>:
Exemplo de código CSS :hover com um div
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 30px;
background-color: #8ebf42;
color: #eee;
}
div:hover {
background-color: #444;
color: #fff;
}
</style>
</head>
<body>
<h2>:hover selector example</h2>
<div>
Lorem ipsum is simply dummy text...
</div>
</body>
</html>