Make a div appear on hover over another div [duplicate]

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

Answer 1

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