子 div 是否可见而父 div 隐藏？-css教程-PHP中文网

子 div 是否可见而父 div 隐藏？

Susan Sarandon

发布： 2024-12-08 04:37:17

原创

926 人浏览过

Can a Child Div Be Visible While Its Parent Div Is Hidden?

在隐藏的父 div 中显示子 div

子 div 可以在其父 div 隐藏时显示吗？虽然看起来违反直觉，但这种情况是可以实现的。

考虑以下 HTML 代码：

<style>
  .Main-Div {
    display: none;
  }
</style>

<div class="Main-Div">
  This is some Text..
  This is some Text..
  <div class="Inner-Div'">
    <a href="#"><img src="/image/pic.jpg"></a>
  </div>
  This is some Text..
  This is some Text..
</div>

登录后复制

默认情况下，使用 'display: none; 隐藏 'Main-Div' 类。 '在CSS中。但是，目标是在这个隐藏的父级中显示“Inner-Div”类。

要实现此目的，有必要控制可见性而不是显示。 CSS 可以如下使用：

.parent>.child {
  visibility: visible;
}

.parent {
  visibility: hidden;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

登录后复制

这里，子 div 的“visibility”样式设置为“visible”，而父 div 的“visibility”样式设置为“hidden”。此外，父 div 的宽度和高度定义为零，以最大限度地减少其存在。通过执行此操作，子 div 在隐藏的父 div 中变得可见。

有关完整示例，请参阅以下 JSFiddle：http://jsfiddle.net/pread13/h955D/153/。

以上是子 div 是否可见而父 div 隐藏？的详细内容。更多信息请关注PHP中文网其他相关文章！