How to hover on a parent element to change a child element

31 Jan 2014

I was curious about how to show a child when hovering over a parent element. Turned out to be pretty easy.

<div class="parent">
    <div class="child">Child</div>

Child is hidden by default

.child {
    visibility: hidden;

On hover the child is visible

.parent:hover .child {
    visibility: visible;

View Fiddle Here