How to display a div on hover in HTML

In this article we will learn how to display a div on hover, we will simulate an animation so that a <div> that was hidden appears.

What’s up programmer, ok? Let’s learn something new!

The idea of displaying a <div> with hover, is to activate an animation effect

Changing the display property of the <div> that is hidden, when the target <div> hovers

So it will only be displayed with the activation of the event

Let’s take a practical example:

<div class="container">
 <a href="">Show description</a>
 <p>This is the description that needs to be shown.</p>
</div>

This will be our HTML, we simulate a complete description that will be activated when hovering the link

But we also need to hide it, in addition to making the hover effect

Let’s go to CSS:

.container p {
 display: none;
}

.container:hover p {
 display: block;
}

Only this CSS code is needed, notice that we hide the paragraph (display: none)

And when we hover in the container, we display it again

That is, we activate a rule in one element from the hover in another

View the results in the browser:

Example above without the mouse on the link

Now activating the effect with the mouse pointer on the link, i.e. activating the hover event

And so our goal is complete, see also that we use an a tag to perform the effect

But this is not limited to it, try other tags/elements and see that this happens normally with the hover effect

Conclusion

In this article we learned how to display a <div> after a hover event

For this we must hide the content, which should only appear with hover, with display and the value none

Then we create a rule that displays the <div> from hover, changing the display to block

And if you want to learn more about HTML and CSS, click here!