Make a div appear on hover over another div

Question

I am trying to have it so that a little colored box comes up when you hover over an image.I have recreated the scenario here: http://jsfiddle.net/UaXUS/

The div shows up properly when I remove the visibility:hidden attribute, but not when I try to use the hover part. Any suggestions as to how to fix this? I have also tried display:none going to display:inline or display:block, but no luck

why do you have #content:hover + #hoverbar? the + sign is for elements that are siblings, not nested elements which is what you have. remove the + sign. — Sammy, Sep 28 '13 at 01:05

score 15 · Accepted Answer · answered Sep 28 '13 at 01:07

Replace

#content:hover + #hoverbar{
    visibility:visible;
}

with

#content:hover > #hoverbar{
    visibility:visible;
}

or

#content:hover #hoverbar{
    visibility:visible;
}

The plus sign '+' is for siblings. In your case the div is nested.

Here the updated jsfiddle

Make a div appear on hover over another div

1 Answers1

Linked