css中dispaly:hidden怎样样其子元素一起隐藏？

问题描述

问 题

写了一段demo，想要.team .shadow{

    position: absolute;
    left: 0;
    top:  0;
    width: 400px;
    height: 400px;
    display: hidden;
    background: rgba(0,0,0,0);
    z-index: 1000;

}
.team .shadow .content{
    /*position: absolute;
    top:165px;
    left: 90px;*/
    width: 70px;
    height: 70px;
    opacity: 0.8;
    background: red;
    border-radius: 35px;
}
.team .shadow:hover{
    display: block;
    background: rgba(0,0,0,0.6);

}
<div class="shadow">

        <div class="content">详情</div>
        <div class="edit">编辑</div>
    </div>
hover前后，content的内容一直都显示了出来，display属性不影响它的子元素吗？

如图，现在这是用上面代码写出来的hover前后的效果，图中红色的区块是shadow的子元素，但是它在hover前就已经出现了，有没有办法纯用css把这个写来呢

解决方案

visibility属性是隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征。

visibility属性用来确定元素是显示还是隐藏，这用visibility="visible|hidden"来表示，

visible表示显示，

hidden表示（仅）隐藏，不可恢复。

当visibility被设置为"hidden"的时候，元素虽然被隐藏了，

1、仍然占据它原来所在的位置。visibility会保留元素的位置.

2、元素被隐藏之后，就不能再接收到其它事件了，当其被设为"hidden"的时候，就不能再接收响应到事件了，因此也就无法通过JS令其显示出来。

display属性就有一点不同了。

none隐藏（元素消失），可恢复

inline,block显示

1、display被设置为block(块)时，容器中所有的元素将会被当作一个单独的块，就像<div>元素一样，它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block，使其可以像<div>一样工作。

2、display设置为inline，将使其行为和元素inline一样---即使它是普通的块元素如<div>，它也将会被组合成像<span>那样的输出流。最后是display被设置：none,这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填充。

这篇关于css中dispaly:hidden怎样样其子元素一起隐藏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！