Show child div on mouse hover of parent - needs javascript?

Question

I need to show a div when you house over its parent (default is for the child div to be hidden). Is the only way to do this with javascript? Thanks

Answer 1

In addition to the accepted answer, one can use opacity so that layout is not jumping around on hover (this also allows to animate the appearance):

css:

.show-on-hover-parent:hover .show-on-hover-item {
    opacity: 1;
   //transition: opacity .5s; //<- optional opacity animation
}

.show-on-hover-parent .show-on-hover-item {
    opacity: 0;
   //transition: opacity .5s; //<- optional opacity animation
}

html:

<div class="show-on-hover-parent">
    <div>Always visible 1</div>
    <div class="show-on-hover-item">visible on hover</div>
    <div>Always visible 2</div>
</div>