Eine `div` erscheinen lassen beim Überfahren einer anderen `div`

Question

Ich versuche, dass eine kleine farbige Box erscheint, wenn Sie über ein Bild fahren. Ich habe das Szenario hier nachgestellt: http://jsfiddle.net/UaXUS/

Das Div erscheint ordnungsgemäß, wenn ich das visibility:hidden Attribut entferne, aber nicht, wenn ich den hover-Teil versuche. Irgendwelche Vorschläge, wie man das beheben kann? Ich habe auch versucht, von display:none zu display:inline oder display:block zu wechseln, aber kein Glück.

Answer 1

Ersetzen

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

durch

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

oder

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

Das Pluszeichen '+' steht für Geschwister. In Ihrem Fall ist das div verschachtelt.

Hier der aktualisierte jsfiddle