Artigos HTML e CSS Hover CSS: ativando estilo de um elemento

:hover

O :hover é uma pseudo-classe CSS que ao ser utilizada ativa estilos em um elemento.

O :hover possibilita um elemento ter o seu estilo alterado através da ação do usuário, quando o próprio passa o cursor do mouse sobre o elemento.

Este recurso é bastante utilizado para adicionar funcionalidades de interação em uma aplicação web.

Como utilizar a pseudoclasse :hover?

O :hover deve ser utilizado após um seletor CSS, que pode ser um elemento (todos os elementos HTML), uma classe, ou um id.

Hover CSS: na prática

a:hover {
     background-color: orange;
}

Sintaxe CSS

seletor:hover {
     propriedade: valor;
}

Exemplos de uso do :hover

Exemplo 1

Nos Códigos 1 e 2 temos um exemplo que demonstra a pseudo-classe :hover sendo aplicada em diversos elementos e cada um apresentando um efeito diferente.

<h2>Passe o mouse sobre os links para vê-los mudar o estilo.</h2>

<p><a class="exemplo1" href="default.asp">Passe o mouse sobre o link e mude sua a cor</a></p>
<p><a class="exemplo2" href="default.asp">Passe o mouse sobre o link e mude o tamanho de sua fonte</a></p>
<p><a class="exemplo3" href="default.asp">Passe o mouse sobre o link e mude a sua cor de fundo</a></p>
<p><a class="exemplo4" href="default.asp">Passe o mouse sobre o link e mude a sua fonte</a></p>
Código 1. Código HTML
.exemplo1:hover {
  color: red;
}

.exemplo2:hover {
  font-size: 150%;
}

.exemplo3:hover {
  background: red;
}

.exemplo4:hover {
  font-family: monospace;
}
Código 2. Código CSS

Note que ao passar o cursor do mouse sobre os links, os seus estilos serão modificados momentaneamente.

Exemplo 2

Nos Códigos 3 e 4 temos o exemplo em que demonstramos o uso do :hover alterando as cores de fundo de dois elementos.

<div>
  <button>Clique aqui</button>
</div>
Código 3. Código HTML
div {
  width: 300px;
  height: 300px;
  border-radius: 8px;
  border: 2px solid black;
  display: flex;
  align-items:center;
  justify-content: center;
}

div:hover {
  background-color: aqua;
}

button {
  font-size: 18px;
  font-weight: 600;
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 15px;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: red;
}
Código 4. Código CSS

Note que neste exemplo o elemento <button> encontra-se dentro do elemento <div>. Ao passar o cursor do mouse em ambos os elementos, eles terão os seus estilos modificados.

Perceba que mesmo passando o cursor em cima no botão, o elemento div continua com o estilo modificado. Isso acontece porque o elemento botão está contido no elemento div.

Exemplo 3

Nos Códigos 5 e 6 temos o exemplo em que demostramos como realizar um menu dropdown com o uso do :hover.

<div>
  <ul>
    <li class='lista1'>
      <a href="#">Menu Dropdown</a>
      <ul class='lista2'>
        <li class='lista-link'><a class='link' href="#">Link 1</a></li>
        <li class='lista-link'><a class='link' href="#">Link 2</a></li>
        <li class='lista-link'><a class='link' href="#">Link 3</a></li>
      </ul>
    </li>
  </ul>
</div>
Código 5. Código HTML
*{
  margin: 0;
}

div {
  background-color: yellow;
}

div a {
  text-decoration: none;
  color: black;
  font-size: 20px;
  font-weight: 600;
  padding: 15px;
  display:inline-block;
}

ul {
  display: inline;
  margin: 0;
  padding: 0;
}

.lista1 {
  display: inline-block;
}

.lista1:hover {
  background: #333;
}

.lista1:hover .lista2 {
  display: block;
}

.lista2 {
  position: absolute;
  width: 200px;
  display: none;
}

.lista-link {
  background: #555;
  display: block;
}

.link {
  display:block !important;
}

.lista-link:hover {
  background: #666;
}
Código 6. Código CSS

Note que ao passar o cursor no elemento "Menu Dropdown", os itens do menu aparecerão logo abaixo. Isso acontece porque os itens da lista estarão “escondidos” e com o uso do hover os itens poderão ser visualizados com a ação do usuário.

Compatibilidade com navegadores

O :hover é suportado em todos os navegadores apresentados na tabela abaixo:

:hover Chrome Mozilla Firefox Edge Opera Safari
4.0 2.0 7.0 9.6 3.1

No Internet Explorer deve ser declarado um <!DOCTYPE> para que o :hover funcione em outros elementos além do elemento <a>.