How to style the background of the parent element when hovering more then one child element?

Question

According to a trick found in Stack overflow, I can change the background of the parent element hovering a child like this:

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

But I need to change the background color hovering different child elements. For example, hovering the Facebook button, the background goes blue, while hovering the Google + button, the backgroud goes red.

I've tried this:

    <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>

but for multiple buttons it didn't work. The result I expect is similar to:

There is another answer on that page showing the JavaScript way to do this which would be easiest — DylanB, Aug 05 '15 at 01:42
Could you please explain that JS for me please? Or how to implement it.. Thanks.. — Henrique Barcelos, Aug 05 '15 at 01:54

Rami.Q · Answer 1 · 2015-08-05T02:51:25.340

Is this what you want?

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

DEMO 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;
}

Demo 1 is what fits me. But it actually changes the color of the white_container. It cannot happen, I want the background of share_box to change color. — Henrique Barcelos, Aug 05 '15 at 04:19
this is impossible with css only, i could give you a solution using JQuery, is this an option for you? — Rami.Q, Aug 05 '15 at 12:28
No, thank you! I made it using another div inside the share div, named white container, with `position: absolute`. Check the another answer to see it working. Thank you for your help. — Henrique Barcelos, Aug 07 '15 at 07:30

score 2 · Accepted Answer · 2015-08-06T02:00:44.153

If you set the parent position: relative, it will contain any position: absolute children.

Create a new element inside the end of the parent, then make it position: absolute and position and size it so that it fills the parent.

Then use z-index: -1 to set it behind the rest of the content (e.g. the buttons).

Then you can use the General Sibling Combinator (~) to select the new element after the hovered element.

.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("https://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>

I think I understand, and I'm going to try it now. But in your running example, the color is changing for the full background, and I want only for share_box.. Because white_container should stay white in all cases. — Henrique Barcelos, Aug 05 '15 at 04:21
I've updated my answer, that should be what you're looking for if I understand what your asking for. — , Aug 05 '15 at 15:30
Sure! I did `position: absolute` in the white container before, and It worked just the way you did there, but many hours later. Thank you so much! And after styling everything, [the final result is](http://3.bp.blogspot.com/-VS3gHhIBYOw/VcRdp0cCGeI/AAAAAAAAChA/KsaH211_SXc/s1600/Sem%2Bt%25C3%25ADtulo.png) :) — Henrique Barcelos, Aug 07 '15 at 07:27

How to style the background of the parent element when hovering more then one child element?

2 Answers2

Linked