HTML: Como exibir uma div em hover

Neste artigo veremos como exibir uma div em hover, simularemos uma animação para que uma div que estava escondida apareça.

Fala programador(a), beleza? Bora aprender coisa nova!

A ideia de exibir uma div com hover, é ativar um efeito de animação

Alterando a propriedade display da div que está escondida, quando houver o hover na div alvo

Assim ela só será exibida com a ativação do evento

Vamos a um exemplo prático:

<!DOCTYPE html>
<html>
<head>
    <title>Como exibir div com hover</title>
    <meta charset="utf-8">
</head>
<body>
    <div class="container">
        <a href="">Descrição completa</a>
        <p>O produto tem sua qualidade reconhida pela OMS e grandes empresas de saúde.</p>
    </div>
</body>
</html>

Este será nosso HTML, simulamos uma descrição completa que será ativada ao fazer hover no link

Porém precisamos também esconder ela, além de fazer o efeito do hover

Vamos ao CSS:

.container p {
    display: none;
}

.container:hover p {
    display: block;
}

Apenas este código CSS é necessário, perceba que escondemos o parágrafo (display: none)

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

E ao realizar hover no container, exibimos ele de novo

Ou seja, ativamos uma regra em um elemento a partir do hover em outro

Veja os resultados no navegador:

Exemplo acima sem o mouse no link

AAgora ativando o efeito com o ponteiro do mouse no link, ou seja, ativando o evento de hover

E assim nosso objetivo está completo, veja também que utilizamos uma tag a para realizar o efeito

Mas isso não se limita a ela, experimente outras tags/elementos e veja que isso acontece normalmente com o efeito de hover

Conclusão

Neste artigo aprendemos como exibir uma div após um evento de hover

Para isso devemos esconder o conteúdo, que deve aparecer apenas com hover, com display e o valor none

Depois criamos uma regra que exibe a div a partir do hover, mudando o display para block

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube