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