How can I make two boxes turn one color when you hover over either?

Question

Currently, when you hover over the blue box both turn yellow, but when you hover over the red box, only it turns yellow.

I need both of them to turn yellow when you hover over either the blue, or the red.

This is as far as I have gotten:

<!DOCTYPE html>
    <html>
        <head>
            <style> 

                #one {
                    background-color: blue;
                    width: 50px;
                    height: 50px;
                    float: left;
                }
                #two {
                    background-color: red;
                    width: 50px;
                    height: 50px;
                    float: left;
                    margin-left: 100px;
                }

                #two:hover {
                    background-color: yellow;
                }
                #two:hover ~ #one {
                    background-color: yellow;
                }

                #one:hover {
                    background-color: yellow;
                }
                #one:hover ~ #two {
                    background-color: yellow;
                }

            </style>
        </head>
    <body>
        <div id="one"></div>
        <div id="two"></div>
    </body>
</html>

possible duplicate of [Is there any way to hover over one element and affect a different element?](http://stackoverflow.com/questions/6867257/is-there-any-way-to-hover-over-one-element-and-affect-a-different-element). Another useful answer might be http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered — Adam, Aug 13 '14 at 19:16
In order to select a previous sibling, you need to use JavaScript. — TylerH, Aug 13 '14 at 19:18
what about placing them into the same container and set style for this container — Ivan Kuckir, Aug 13 '14 at 19:22
@TylerH pointer-events and hover can help here : http://codepen.io/anon/pen/zwsuF , it even triggers bg parent only when child is hovered — G-Cyrillus, Aug 13 '14 at 19:48
@TylerH , forget it, the question had nothing to do with climbing up the DOM via CSS ... — G-Cyrillus, Aug 13 '14 at 19:51
@GCyrillus Changing the markup changes the game, of course :-) — TylerH, Aug 13 '14 at 20:02
@TylerH , oki : then no extra parent , just body .A container is a container ;) http://codepen.io/gc-nomade/pen/yizaC — G-Cyrillus, Aug 13 '14 at 20:17
@GCyrillus I had forgotten for a moment about the ability to hover an an ancestor to effect a change in two descendant siblings, and was thinking only of a strict "previous sibling selector". — TylerH, Aug 13 '14 at 20:22
@TylerH same with me , this is what i understood in the first place untill he accepted an answer :) — G-Cyrillus, Aug 13 '14 at 20:29

CroaToa · Answer 1 · 2014-08-13T19:35:26.033

3

here is solution without js

<div class="container">
  <div class="one"></div>
  <div class="two"></div>
</div>

JSFIDDLE

edited Aug 13 '14 at 19:35

answered Aug 13 '14 at 19:26

CroaToa

870
2
13
33

.container:nth-child(1):hover div { background: yellow; } you can avoid to use :nth-child(1) but just .container:hover div { background: yellow; } – Alessandro Incarnati Aug 13 '14 at 19:33
1

@Alex You are right, thanks. – CroaToa Aug 13 '14 at 19:35
1

If #one, #two do not float, parent has no problem to wrap them, and result/effect is different: http://jsfiddle.net/hmLbrouk/3/ – G-Cyrillus Aug 13 '14 at 19:44

score 2 · Accepted Answer · answered Aug 13 '14 at 19:32

2

Demo

just this

.container:hover div {
    background: yellow;
}

answered Aug 13 '14 at 19:32

4dgaurav

10,721
4
27
55

exellent, how to make a big deal of a basic CSS rule and let everyone think it cannot be that ;) +1 of course – G-Cyrillus Aug 13 '14 at 19:50

score 0 · Answer 3 · answered Aug 13 '14 at 19:32

Using :before to simulate a hovered div #one...
HTML stays the same

DEMO

CSS

#one {
    background-color: blue;
    width: 50px;
    height: 50px;
    float: left;
}
#two {
    background-color: red;
    width: 50px;
    height: 50px;
    float: left;
    margin-left: 100px;
}
#one:hover, #one:hover ~ #two, #two:hover {
    background-color: yellow;
}
#two:before {
    content:'';
    display:none;
    width:50px;
    height:50px;
    margin-left:-150px;
    background-color: yellow;
}
#two:hover:before {
    display:block;
}

But if blocks need move dinamicly? Responsive or fluid design? — CroaToa, Aug 13 '14 at 19:33

G-Cyrillus · Answer 4 · 2014-08-13T19:46:51.003

If you want hover to applied only when child are hovered, then pointer-events can be a way to do this: DEMO

your CSS turns to be more like :

#one {
  background-color: blue;
  width: 50px;
  height: 50px;
  float: left;
}
#two {
  background-color: red;
  width: 50px;
  height: 50px;
  float: left;
  margin-left: 100px;
}

.parent {
  pointer-events:none;
  overflow:hidden;/* for float , for DEMO purpose to extend body or parent as there would be more content behind childs in real situation. */
}
.parent div {
  pointer-events:auto;
  cursor:pointer
}
.parent:hover div#one,
.parent:hover div#two
{
  background-color:yellow;
}

How does this works ?

pointer-events:none , kills mouse events on parent. Reset to normal to childs.

If you hover a child, then the parent is hovered and the CSS rules parent:hover can be applied.

How can I make two boxes turn one color when you hover over either?

4 Answers4