How to display elements on hover

How to display elements on hover

Step 1 - Add HTML:

<div class="myDIV">Hover over me.</div>
<div class="hide">I will show up when someone hovers over the div above.</div>

Step 2 - Add CSS:

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

Try it yourself

Example explanation:

Adjacent sibling selector (+) selects all elements adjacent to the specified element.

The word "adjacent" means "immediately following", the above example selects all elements with class=".hide" The elements, which are placed immediately after hovering on the element with class=".myDIV" After the element.

Related Pages

Tutorial:CSS Combinator