Div wont remain expanded when I hover over it

Question

So I'm designing this graphic heavy website and I wanted to have this box display when you hover over the image that tells you more about the image you're looking at, with a link if you wanted more information. I just realized that when you move your mouse to this new div, it collapses. I don't understand why, or how to make it stop.

Here is a jsfiddle

Answer 1

Give your wrapping <div> a class like in this fiddle .

The key is this css style:

.wrapper:hover #b-image-info {
    display: block;
}

UPDATE

This should help:

.wrapper:hover * { display:none;}
.warpper:hover #b-image, .warpper:hover #b-image-info { display: block; }

Answer 2

Well just in case you want to do with js/jquery. You could do something like this. When hovered get the image info and change its display property.

$("#b-image").hover(function(){
   $("#b-image-info").css("display", "block");
}, function(){
    //nothing
});

http://jsfiddle.net/btevfik/jq3xkm6y/