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:

    
Always visible 1
    
visible on hover
    
Always visible 2