How to change the color of buttons with the hover on just one button (CSS)

Question

How to change the color of buttons with the hover on just one button (CSS)

Navigation

#1 by (2 votes)

0

Well, my problem is this:

I have five buttons, in horizontal order. Each has a specific color in the hover. When you place your mouse over any one of them, all should assume the color that the selected one has .

I successfully used this effect on the first button, since the others changed color; when I applied the code to the others, only the front (right) buttons changed color, and I can not make the previous button change.

To demonstrate, I will simulate the third button, I will call "box3". I'm trying the following:

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

^ the two above are the ones left and do not change color

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

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

css css3 hover background-color

asked by anonymous 12.09.2017 / 19:34

1 answer

How to get values close to the given offset of an array? Problems with git repositioning codeam on tfs

score 2 · 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 think can not pick up the previous elements, just the next, to get all that belong to a "parent" element will require JavaScript / jquery, however / strong> a little the effect of applying :hover to 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 .row , so 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 is important to note that pointer-events affects the touch and mouse / mouse of other child elements, this can be solved by applying the required child elements pointer-events: auto; , > *

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