如何更徘徊然后一个子元素，当样式父元素的背景是什么？(How to style the backgr

根据一招在堆栈溢出发现，我可以改变徘徊像这样的孩子的父元素的背景：

parent sibling { }
parent sibling:hover { }
parent:hover sibling { }

但我需要改变背景颜色不同徘徊子元素。 例如，徘徊在Facebook的按钮，背景变为蓝色，而徘徊在谷歌+按钮，在研究背景变为红色。

我已经试过这样：

    <div class="share_box">
      <div class="white-container">

      <div class="facebook-sibling"/>
      <a class="facebook-child-button"/>

      <div class="twitter-sibling"/>
      <a class="twitter-child-button"/>

      <div class="googleplus-sibling"/>
      <a class="googleplus-child-button"/>

      </div>
  </div>

但对于多个按钮没有奏效。 我希望得到的结果是相似的：

Answer 1:

，如果你设置父position: relative ，它将包含任何position: absolute孩子。

创建父年底内一个新的元素，然后使它position: absolute和位置并调整其大小，使其充满父。

然后使用z-index: -1来设定它的内容（例如按钮）的其余部分的后面。

然后你可以使用一般兄弟姐妹Combinator的（ ~ ）悬停元素后选择新的元素。

 .facebook:hover ~ .background { background-color: rgb(50, 100, 150); } .twitter:hover ~ .background { background-color: rgb(50, 150, 250); } .google:hover ~ .background { background-color: rgb(250, 75, 50); } .share { position: relative; } .background { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; } /* Following styling for demo purposes only, not relevant */ .facebook:before { background-position:-46px -28px; width:101px; } .twitter:before { background-position:-151px -28px; width:90px; } .google:before { background-position:-245px -28px; width:94px; } .button:before { display:inline-block; content: ""; height:36px; background-image:url("http://i.stack.imgur.com/AXvMk.png"); border-radius: 3px; box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.2); } .button { display:inline-block; padding: 2px; } .white-container { padding: 10px 20px; font-size: 0; background: #fff; border-radius: 3px; } .background { background: #fff; } body { margin: 0 4px; border: 1px solid #aaa; border-top: 0px; box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1) } .share { padding: 10px 15px; box-shadow: 0px 5px 5px -5px rgba(0,0,0,0.3) inset } body:before { content: ''; height: 4px; display: block; background: #fff; border-bottom: 1px solid #aaa } html { background: #efefef } 

 <div class="share"> <div class="white-container"> <a href="#" class="button facebook"></a> <a href="#" class="button twitter"></a> <a href="#" class="button google"></a> <div class="background"></div> </div> </div> 

Answer 2:

这是你想要的吗？

DEMO 1： http://jsfiddle.net/t73431y8/

演示2： http://jsfiddle.net/t73431y8/2/

HTML：

<div class="PARENT">
<div class="RED">RED</div>
<div class="BLUE">BLUE</div>
<div class="GREEN">GREEN</div>   
</div>

CSS：

.PARENT{
    position: relative;
}

.RED{
    display: inline-block;
    margin: 5px;
    padding: 5px;
    color: #BB0000;
    background: #FFF;
}

.RED:hover:after{
    display: block;
    width: 100%;
    height: 100%;
    background: #BB0000;
    position: absolute;
    top: 0px;
    left: 0px;
    content: ' ';
    z-index: -1;
}

.BLUE{
    display: inline-block;
    margin: 5px;
    padding: 5px;
    color: #0000BB;
    background: #FFF;
}
.BLUE:hover:after{
    display: block;
    width: 100%;
    height: 100%;
    background: #0000BB;
    position: absolute;
    top: 0px;
    left: 0px;
    content: ' ';
    z-index: -1;
}
.GREEN{
    display: inline-block;
    margin: 5px;
    padding: 5px;
    color: #00BB00;
    background: #FFF;
}
.GREEN:hover:after{
    display: block;
    width: 100%;
    height: 100%;
    background: #00BB00;
    position: absolute;
    top: 0px;
    left: 0px;
    content: ' ';
    z-index: -1;
}

文章来源: How to style the background of the parent element when hovering more then one child element?