CSS HTML

HTML: Como exibir uma div em hover

22 de maio de 2020

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.

exibir div com hover capa

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:

exibir div com hover ex 1

Exemplo acima sem o mouse no link

Aexibir div com hover ex 2Agora 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

Subscribe
Notify of
guest
2 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Marcio

Obrigado, me ajudou muito

Battisti

de nada Marcio!

2
0
Would love your thoughts, please comment.x