Question

可能重复：
Display HTML child element when parent element is display:none

我在另一个div里面有一个div。我已将外部div设置为display:none，这也会使内部div隐藏起来。如何显示内部div并将外部div设置为不显示？

CSS：

.hidden {
    width:100px;
    height:100px;
    background-color:red;
    display:none;
}

.display {
    width:50px;
    height:50px;
    background-color: yellow;
    display:block;
}

HTML：

<div class="hidden">
    <div class="display"></div>
</div>

示例：http://jsfiddle.net/gcyhz/1/

Answer 1

实现此目的的最简单方法是避免使用display: none并使用transparent颜色：

.hidden {
    width:100px;
    height:100px;
    color: transparent;
    background-color: transparent;
}

.display {
    width:50px;
    height:50px;
    color: #000;
    background-color: yellow;
    display:block;
}

JS Fiddle demo

还可以选择使用visibility代替display: none：

.hidden {
    width:100px;
    height:100px;
    visibility: hidden;
}

.display {
    width:50px;
    height:50px;
    color: #000;
    background-color: yellow;
    visibility: visible;
}

JS Fiddle demo

然而，这会导致visibility: hidden元素占用DOM中的已分配空间，但显然是空的（因此它仍然具有物理尺寸，它在页面上不可见），尽管如此子元素可以通过声明visibility: visible来覆盖该属性。

老实说，后一种建议实际上与第一种建议完全相同，只是避免了某些浏览器可能会将transparent作为color的问题（我不记得哪个浏览器）有这个问题，但我似乎记得它是一个较旧的IE，但我不能引用任何文件来证实这种回忆）。

不幸的是，父元素上的display: none声明无法在子元素上被覆盖，顺便说一下，opacity也不能覆盖。{/ p>

如上所述，最简单的解决方案是简单地将元素移出其父元素，并避免继承问题而不是尝试补偿它。

Answer 2

不幸的是，这是不可能的。您必须设计一个替代解决方案。（当你需要显示它时，也许将内部div移出隐藏的div？）

Answer 3

当你将父元素（元素A）设置为display:none;时，它将（在一个非常简单的解释中）从页面中删除元素，这样其他元素就像元素A不在页面上一样。与visibility:hidden;相反。将其设置为display:none;将必须隐藏该元素及其子元素。

据我所知，没办法解决。

Answer 4

将display: none设置为元素会使其看起来好像在DOM中不存在（它不占用可视空间）。无法在具有display: none的其他元素内部生成元素以实际显示。

Answer 5

jquery .unwrap()似乎可以解决问题：

$(".display").unwrap();

（虽然我有很多数据，在我的情况下最好做这个服务器端）

用父显示显示div：none

5 个答案: