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>.