Pseudo-classe :hover do CSS

Definição e uso

CSS :hover Os pseudo-classes são usados para selecionar elementos ao passar o mouse sobre eles.

Dica::hover Os pseudo-classes podem ser usados para todos os elementos, não apenas para links.

Dica:Use :link Defina o estilo dos links de páginas não visitadas, usando :visited Defina o estilo dos links de páginas visitadas, usando :active Defina o estilo dos links ativos.

Atenção:No CSS,:hover Deve ser colocado em :link e :visited!(se existir) antes de entrar em vigor!

Exemplo

Exemplo 1

Escolha e defina o estilo dos links ao passar o mouse sobre eles:

a:hover {
  background-color: yellow;
  font-size: 18px;
}

Experimente você mesmo

Exemplo 2

Escolha e defina o estilo dos elementos <p>, <h1> e <a> ao passar o mouse sobre eles:

p:hover, h1:hover, a:hover {
  background-color: yellow;
}

Experimente você mesmo

Exemplo 3

Escolher e definir os estilos dos links não visitados, visitados, em hover e ativos:

/* Link não visitado */
a:link {
  color: green;
}
/* Link visitado */
a:visited {
  color: green;
}
/* Link com o mouse sobre ele */
a:hover {
  color: red;
}
/* Link ativo */
a:active {
  color: yellow;
}

Experimente você mesmo

Exemplo 4

Definir estilos diferentes para os links:

a.ex1:hover, a.ex1:active {
  color: red;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

Experimente você mesmo

Exemplo 5

Passe o mouse sobre o elemento <span> para mostrar o elemento <div> (semelhante a um tooltip):

div {
  display: none;
}
span:hover + div {
  display: block;
}

Experimente você mesmo

Exemplo 6

Mostrar e ocultar o menu 'desceu' ao passar o mouse:

ul {
  display: inline;
  margin: 0;
  padding: 0;
}
ul li {display: inline-block;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
  position: absolute;
  width: 200px;
  display: none;
}
ul li ul li {
  background: #555;
  display: block;
}
ul li ul li a {display: block !important;}
ul li ul li:hover {background: #666;}

Experimente você mesmo

Sintaxe CSS

:hover {
  declarações css;
}

Detalhes técnicos

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa pseudo-classe.

Páginas relacionadas

Tutorial:Links CSS

Tutorial:Pseudo-classes CSS