Question

我有一个隐藏的div，因为它有属性：display:none。当我将鼠标悬停在其他元素上时，我需要显示它，这意味着，我希望它出现，或者只要我将鼠标悬停在IT上，就显示display:block。我发现了一些问题，他们正处理你将鼠标悬停在包含隐藏div的div上时显示div的情况：Show hidden div on hover

HTML

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

CSS

#case1{
    display: none;
}

如果你能给我一个奖金并回答这个相关问题我也会感激不尽：

我隐藏了div，当我将鼠标悬停在单独的a href链接上时，我希望显示该div。但由于某种原因它不起作用：

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>

当我将鼠标悬停在显示img1的a href上时，我想隐藏img1并显示它。

非常感谢所有帮助。感谢

Answer 1

display: none属性从流中删除元素。换句话说，它根本不存在，所以你不能点击它，将鼠标悬停在它上面等等。

如果您希望元素保留在流中（即＆＃34;占用空间＆＃34;）但只是不可见，您可以使用visibility或opacity。

Answer 2

关于第一个问题，你不能将鼠标悬停在未显示的元素上。（即display: none）

您可以尝试将其opacity或visibility设置为0，但不显示它会使其无法恢复。

您还可以将opacity: 0效果与height: 0px（或任何其他小值）结合使用，以使其同时变小和不可见。

Answer 3

尝试使用此CSS时，visibility属性会保留元素空间，同时使其不可见，因此您仍然可以将鼠标悬停在它上面！

#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;}

当我将鼠标悬停在它上面时显示隐藏的div

5 个答案: