Question

初学者怀疑：当孩子div可见时，我想隐藏父div。 这可能与css 有关吗？也许使用z-index？

另一件事，我可以使用不同的css属性格式化子div，还是需要与父级相同？谢谢！

<!doctype html>
<style type="text/css">
#intro {
width:100%;
float:left;
padding-top:3%;
background-repeat:no-repeat;
background-size:100%;
position:relative;
z-index:50;
}       
.wrapper_intro {
display:block;
width:38%;
margin: 7% 3% 3% 7%;
float:right;
color:black;
padding:3% 3% 4% 3%;
background-color:none;
position:absolute;
z-index:100;
right: 0px;
}
.parent {
display:block;
font-size:5em;
 color:yellow;
margin-top: 2%;
margin-bottom:3%;
text-align:center;
z-index: 102;
}
.child {
display:none;
}
.parent:hover .child {
display:block;
background-color: rgba(242, 218, 192, 0.9);
margin-top:5%;
color:black;
text-align:center;
z-index: 101;
}

</style>

      <div class="wrapper_intro">

              <div class="parent">
                    <div>Ola!</div>

                    <div class="child">Lorem ipsum dolor sit     amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
              </div>

Answer 1

隐藏父div时，其中的所有元素也将被隐藏。不明白你的情况。如果您希望它们分开，请不要将它们嵌套在div中。将它们分开。

是的，父母和孩子的CSS可能不同。您可以使用！important来覆盖已经用于父母的任何CSS。

Answer 2

由于评论它应该很简单，如何添加只是

.parent:hover > div:first-child {visibility: hidden}

http://jsfiddle.net/czd1z5jh/

或者如果您想将.child移到顶部：

.parent:hover > div:first-child {display: none}

http://jsfiddle.net/czd1z5jh/1/

CSS3：当子div可见时隐藏父div

2 个答案: