將鼠標懸停在其上時顯示隱藏的div I

Question

我有一個隱藏的div，因為它具有屬性： display:none 。 當我將其懸停而不是其他元素時，我需要顯示它，這意味着我希望它出現在鼠標懸停在IT上時，或者display:block 。 我發現了在將鼠標懸停在包含該隱藏div的div時顯示div的情況下，它們在起作用的問題： 在懸停時顯示隱藏的div

HTML

<a href="#" id="case1"><div>my hidden div</div></a>

CSS

#case1{
    display: none;
}

如果您能給我獎金並回答這個相關問題，我將不勝感激：

我有隱藏的div，當我將鼠標懸停在單獨a href鏈接上時要顯示。 但由於某種原因它不起作用：

HTML

<nav>
        <ul id="pics">
          <li><a href="#"><img src="img1"></a></li>
          <!--other <li>-->
        </ul>
        <ul id="menu">
          <li><a href="#">show img1</a></li>
          <!--other <li>-->
        </ul>
</nav>

當我將鼠標懸停在顯示show img1 a href上時，我想隱藏img1並顯示它。

非常感謝所有幫助。 謝謝

Answer 1

display: none屬性將從流中刪除元素。 換句話說，它根本不存在，因此您無法單擊它，將鼠標懸停在上面等等。

如果您希望元素保留在流程中（即“占用空間”）但只是不可見，則可以使用visibility或opacity 。

Answer 2

關於第一個問題，很好，您不能將鼠標懸停在未顯示的元素上。 （即display: none ）

您可以嘗試將其opacity或visibility設置為0 ，但是根本不顯示會使它不可懸停。

您還可以將opacity: 0效果與height: 0px （或任何其他小值）結合使用，以使其同時變小和不可見。

Answer 3

嘗試使用此CSS，visible屬性在保持元素空間的同時使其不可見，因此您仍然可以將其懸停在上面！

#case1 {
    visibility: hidden;
}

#case1:hover {
    visibility: visible;
}

Answer 4

對於第二部分：

$("#menu a").hover(function(){
    $("#pics img").show();
},function(){
    $("#pics img").hide();
});

演示： http ： //jsfiddle.net/KYXL4/

Answer 5

您無法懸停隱藏元素，但是由於它是錨的子代，因此您可以懸停錨。

#case1:hover div {display: block;}

不使用ID ...

a:hover div {display: block;}