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
A
Agora 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
Obrigado, me ajudou muito
de nada Marcio!