Question

我正在尝试让我的父div在其子div之上，基本上我有2个div在我的父div，左侧和右侧div中浮动。

<div id="parent">
     <div class="leftbox">left</div>
     <div class="leftbox">right</div>
</div>

两个子div都有浮动：左边和宽度：50％css。父母得了：

#parent {
   overflow:hidden;
}
#parent:hover {
   background: red;
}

我想要做的是在悬停状态开启时用背景覆盖整个父div，但事实是当我将鼠标悬停在父div上时，它不会影响孩子div，让人觉得它是在父div的顶部，所以我做的是我补充说：

position:relative;

到父母div，但它仍然无法运作。知道我怎么能做到这一点？谢谢！

PS：我真的不想隐藏孩子div，基本上我只想把父div放在它上面。我使代码变得简单，但似乎我把你们中的一些人搞糊涂了。这是我想要做的事情，让孩子div低于父母，所以它可以被父母div背景所覆盖，但正如你可以在我的js小提琴上看到的那样，孩子div在父母背景之上：

http://jsfiddle.net/MarkTe/jq12pu3p/

Answer 1

＆＃34;不是真的隐藏它，我只是希望父div在它上面＆＃34;

我认为你可能想要这个的唯一原因是如果父div是部分透明的，所以你仍然可以看到下面的孩子......在这种情况下你可以把第三个div放在相同的高度＆amp;宽度作为父级但位置绝对...

<div id="parent">
  <div class="leftbox">left</div>
  <div class="leftbox">right</div>
  <div class="cover"></div>
</div>

则...

div.cover {
   position:absolute;
   height: 100%;
   width: 100%;
   top: 0;
   left: 0;
   transition: all .3s;
}     

#parent:hover > div.cover, div.cover:hover {
  background-color: #000000;
}

#parent { position: relative; } /* As well as your own code */

Answer 2

您实际上不能将父级分层在其子级上方，但是您可以通过在悬停父级时切换子级的可见性来模仿效果，因此：

＆＃13;

#parent {
  overflow: hidden;
}
#parent:hover {
  background: red;
}
#parent:hover > div{
  visibility:hidden;
}

＆＃13;

<div id="parent">
  <div class="leftbox">left</div>
  <div class="leftbox">right</div>
</div>

＆＃13;

如何在没有绝对位置的子div之上创建父div？

2 个答案: