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

Question

因此，我正在设计一个图形复杂的网站，当您将鼠标悬停在图像上时，希望显示该框，该框可以告诉您更多有关正在查看的图像的信息，并带有链接（如果需要更多信息）。 我只是意识到，当您将鼠标移到这个新的div时，它会崩溃。 我不明白为什么，或如何使其停止。

Here is a jsfiddle

Answer 1

给包裹您的<div>一个像这个小提琴一样的类。

关键是这种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
});