How TO - Display an Element on Hover

Learn how to display an element on hover.

Hover over me.

I am shown when someone hovers over the div above.

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;
}

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 the CSS Combinators Tutorial to learn more about adjacent selectors.