How to change button color with Hover over a single button (CSS)

Question

Well, here’s my problem:

I have five buttons, in horizontal order. Each one has a specific color in the Hover. When placing the mouse over any of them, all the others should take over the color the selected has.

I was able to use this effect successfully on the first button, since the others changed color; when applying the code to the others, only the buttons in front (right) changed color, and I can’t get the previous button to change.

To demonstrate, I’ll simulate the third button, call it "box3". I’m trying the following:

box3:hover ~ box1 {
    background-color:red;
}
box3:hover ~ box2 {
    background-color:red;
}

^ the two above are the ones on the left and don’t change color

box3:hover ~ box4 {
    background-color:red;
}
box3:hover ~ box5 {
    background-color:red;
}

Obs: I didn’t put box3 to change color because this is another element’s Hover, so unnecessary.

I have tried to replace ~ by +, > and empty space as well. Thanks!!

Answer 1

This will only affect the elements to the right of the selected element:

[class*=box]:hover, [class*=box]:hover ~ [class*=box] {
    background-color:red;
}

<div class="row">
   <button class="box1">foo</button>
   <button class="box2">foo</button>
   <button class="box3">foo</button>
   <button class="box4">foo</button>
   <button class="box5">foo</button>
</div>

<div class="row">
   <button class="box1">foo</button>
   <button class="box2">foo</button>
   <button class="box3">foo</button>
   <button class="box4">foo</button>
   <button class="box5">foo</button>
</div>

I believe that is not possible take the previous elements, only the next ones, to get all that belong to a "parent" element will be necessary Javascript/jquery, however it is possible force a little the effect apply :hover in the element parent, so (in this case I created a "parent" element called .row):

.row:hover > [class*=box] {
    background-color:red;
}

<div class="row">
   <button class="box1">foo</button>
   <button class="box2">foo</button>
   <button class="box3">foo</button>
   <button class="box4">foo</button>
   <button class="box5">foo</button>
</div>

However the effect will occur in any area of the .row, then you can use pointer-events: none; and pointer-events: auto;:

/* remove a interação do toch e mouse do elemento "pai"*/
.row {
    pointer-events: none;
}

/* restaura a interação do toch e mouse a todos elementos "filhos", incluindo os botões e outros */
.row > * {
    pointer-events: auto;
}

/* aplica o vermelhor ao passar o mouse sob o elemento pai mas somente quando for possivel "interagir" com pointer-events */
.row:hover > [class*=box] {
    background-color:red;
}

<div class="row">
   <button class="box1">foo</button>
   <button class="box2">foo</button>
   <button class="box3">foo</button>
   <button class="box4">foo</button>
   <button class="box5">foo</button>
</div>

But it’s important note that the pointer-events affects the touch and mouse/mouse of other child elements, this of course can be solved by applying to the necessary child elements the pointer-events: auto;, for a reason I used > *

.row > * {
    pointer-events: auto;
}

---

Extra

If each button element has a color it will be necessary to do this separately, for example:

.row {
    pointer-events: none;
}

.row > * {
    pointer-events: auto;
}

.row:hover > .box1 { background-color: red; }
.row:hover > .box2 { background-color: blue; }
.row:hover > .box3 { background-color: black; }
.row:hover > .box4 { background-color: orange; }
.row:hover > .box5 { background-color: magenta; }

<div class="row">
   <button class="box1">foo</button>
   <button class="box2">foo</button>
   <button class="box3">foo</button>
   <button class="box4">foo</button>
   <button class="box5">foo</button>
</div>

<div class="row">
   <button class="box1">foo</button>
   <button class="box2">foo</button>
   <button class="box3">foo</button>
   <button class="box4">foo</button>
   <button class="box5">foo</button>
</div>