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
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
Formações
Formação Vibe Coding
Do Prompt ao Produto: Crie Software Real com IA
- 473 aulas
- 20 projetos
- 39h 26min
Blog | Mais populares
As diferenças de var, let e const
Como fazer redirecionamento com PHP
Neste artigo você vai aprender a como fazer redirecionamento com PHP, utilizaremos abordagens fáceis de entender e de aplicar Fala programador(a), beleza? Bora aprender mais […]
Checklist de segurança n8n VPS pública: guia essencial para proteger sua instalação
Checklist de segurança n8n VPS pública: guia essencial para proteger sua instalação A popularidade da automação de processos com o n8n está em alta, principalmente […]
Obrigado, me ajudou muito
de nada Marcio!