4

所以我一直认为如果父容器有一个属性集，它就会取代子容器。因此，在我的情况下，我希望隐藏父容器，但子元素具有可见性。但似乎子元素的可见性属性取代了父元素，因此仍会显示。

但扭曲的是，如果使用显示属性，它会按照我想要的方式工作。这是html：

<div class="wrap">
    <a href="">title</a>
</div>

<div class="wrap2">
    <a href="">title2</a>
</div>

CSS：

.wrap { visibility:hidden; }
.wrap a { visibility:visible; }

.wrap2 { display:none; }
.wrap2 a { display:block; }

http://jsfiddle.net/yPXtB/

所以我想要的是隐藏容器的能力，如果我将可见性设置为隐藏，即使子元素可见。

4

3 回答 3

6

另一种解决方法是使用opacity值 0 和 1 而不是visibility.

（如果重要的话，请查看http://caniuse.com/#search=opacity以了解与太旧的浏览器的兼容性）

于 2016-05-02T09:38:35.607 回答
2

如果您需要子 css 具有可见性：可见，那么您不能简单地将父级设置为隐藏，因为父级不会覆盖子级。

您需要将每个单独的子项也设置为隐藏，或者将子项再次包装在另一个具有可见性的 div 中：可见，并将其切换为隐藏而不是父项，即：

<div class="hiddenwrap">
    <div class="visiblewrap"> /* toggle this instead */
        /* content without visibility properties */
    </div>
</div>

.hiddenwrap { visibility:hidden; }
.visiblewrap { visibility:visible; }
于 2013-07-26T20:32:18.730 回答
0

visibility: hidden导致元素不被绘制，但它仍然存在，甚至它占用的空间也被占用。页面流不受影响。因此，仍然可以在该空间中绘制孩子。

如果您没有明确指定，孩子确实会使用父母的可见性，如您在此处看到的：http: //jsfiddle.net/yPXtB/2/

display: none不仅隐藏元素，还从页面流中删除它。显示会影响元素的行为方式并更改流程。没有更多的空间可以吸引孩子。

于 2013-07-26T20:20:53.447 回答