任何方式使CSS可见性工作时嵌套？ [英] Any way to make CSS visibility work when nested?

问题描述

所以我一直认为如果父容器有一个属性设置，它取代了孩子。所以在我的情况下，我想父容器被隐藏，但子元素具有可见的可见性。但是，看起来子元素的可见性属性取代了父类，因此仍然会显示。

So I always thought if the parent container has a property set, it supercedes the child. So in my case I want the parent container to be hidden, but the child elements have a visibility of visible. But it seems the child elements visibility property supercedes the parents and thus will still show.

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

But the twist is if using display property, it works the way I want. Here is the 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/

所以我想要的是隐藏容器的能力，如果我将可见性设置为隐藏甚至

So what I want is the ability to hide the container if I set the visibility to hidden even if the child elements have visible.

推荐答案

另一个解决方法是使用 opacity

Another workaround is to use opacity with values 0 and 1 instead of visibility.

（虽然签出 http://caniuse.com/#search=opacity 与旧版浏览器的兼容性（如果重要））

(Though check out http://caniuse.com/#search=opacity for compatibility with too old browsers if it's important)

这篇关于任何方式使CSS可见性工作时嵌套？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！