brianbolton.me

home

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">
    Parent
    <div class="child">Child</div>
</div> 

Child is hidden by default

.child {
    visibility: hidden;
}

On hover the child is visible

.parent:hover .child {
    visibility: visible;
}

View Fiddle Here