3

我的意图是在一个站点上有 4 个主要的导航栏。如果用户将鼠标悬停在其中，它会展开并显示内容。但是我应该怎么做内容部分呢？

#bottom-menu:hover #contact{
    visibility: visible ;
}

如果我在盒子完全展开时使其可见，它可以工作，但存在一个问题：内容虽然不可见，但仍然存在并且需要空间，这会导致布局折叠。

我想用纯 CSS 来做到这一点，尽管我知道 jQuery。

http://jsfiddle.net/RbZwx/1/

4

2 回答 2

4

visibility: hidden导致元素继续消耗布局空间。

display:none导致它不占用布局空间。

想想“剧透”与“隐藏”。

https://developer.mozilla.org/en/CSS/visibility

可见性 CSS 属性用于两件事：

  • hidden 值隐藏了一个元素，但在它本来应该存在的地方留下了空间。
  • 折叠值隐藏表格的行或列。它还折叠 XUL 元素。

https://developer.mozilla.org/en/CSS/display

display CSS 属性指定用于元素的呈现框的类型。在 HTML 中，默认显示属性值取自 HTML 规范中描述的行为或浏览器/用户默认样式表。XML 中的默认值是内联的。

除了许多不同的显示框类型之外，none 值允许您关闭元素的显示；当您使用 none 时，所有子元素的显示也会关闭。文档呈现为好像该元素在文档树中不存在。

我仍然鼓励您阅读这两篇文章，并了解它们如何影响页面，而不仅仅是针对这种特殊情况。

于 2012-06-16T09:45:09.097 回答
1

使用display: none. 请参阅CSS 2.1：11.2 可见性：“可见性”属性：

该'visibility'属性指定是否呈现由元素生成的框。不可见的盒子仍然会影响布局（将'display'属性设置'none'为完全禁止盒子生成）。值具有以下含义： [...]

hidden生成的框是不可见的（完全透明，没有绘制任何内容），但仍然影响布局。此外，如果元素的后代具有'visibility: visible'.

于 2012-06-16T09:45:27.010 回答