當我將鼠標懸停在它上時，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
});