: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>
.exemplo1:hover {
color: red;
}
.exemplo2:hover {
font-size: 150%;
}
.exemplo3:hover {
background: red;
}
.exemplo4:hover {
font-family: monospace;
}
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>
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;
}
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>
*{
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;
}
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>.
