将鼠标悬停在其上时显示隐藏的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;}