How TO - Display an Element on Hover

❮ Previous Next ❯

Learn how to display an element on hover.

Hover over me.

How To Display an Element on Hover

Step 1) Add HTML:

Example

<div class="myDIV">Hover over me.</div>
<div class="hide">I am shown when someone hovers over the div above.</div>

Step 2) Add CSS:

Example

.hide {
display: none;
}

.myDIV:hover + .hide {
display: block;
color: red;
}

Try it Yourself »

Example Explained

The adjacent sibling selector (+) selects all elements that are the adjacent siblings of a specified element.

The word "adjacent" means "immediately following", and the example above selects all elements with class=".hide", that are placed immediately after elements with class=".myDIV", on hover.

Go to our CSS Combinators Tutorial to learn more about adjacent selectors.

❮ Previous Next ❯