Div 当我将鼠标悬停在它上面时不会保持展开状态

Question

所以我正在设计这个图形繁重的网站，我希望当您将鼠标悬停在图像上时显示此框，它可以告诉您有关您正在查看的图像的更多信息，如果您使用 link想要更多信息。我刚刚意识到，当您将鼠标移到这个新的 div 上时，它会崩溃。我不明白为什么，或者如何让它停止。

Here is a jsfiddle

Answer 1

给你的包装 <div> 一个 class 就像这样 fiddle.

关键是这个css风格：

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

更新

这应该有帮助：

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

Answer 2

好吧，以防万一您想使用 js/jquery。你可以做这样的事情。悬停时获取图像信息并更改其显示属性.

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

Div wont remain expanded when I hover over it