0

Bom, meu problema é o seguinte:

Tenho cinco botões, em ordem horizontal. Cada um tem uma cor específica no hover. Ao colocar o mouse sobre algum deles, todos os outros deveriam assumir a cor que o selecionado tem.

Eu consegui usar esse efeito com sucesso no primeiro botão, já que os demais mudaram de cor; ao aplicar o código nos outros, apenas os botões à frente (à direita) mudaram de cor, e não consigo fazer com que o botão anterior mude.

Pra demonstrar, vou simular o terceiro botão, chamarei de "box3". Estou tentando o seguinte:

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

^ os dois acima são os que ficam à esquerda e não mudam de cor

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

obs: não coloquei o box3 para mudar de cor pois este é hover de outro elemento, então desnecessário.

Já tentei trocar o ~ por +, > e por espaço vazio também. Valeu!!

2
  • Não conseguirá apenas com CSS, pois os seletores disponíveis só enxergam os elementos a frente do em questão. Para fazer isso acredito que precisará de JavaScript.
    – Woss
    Commented 12/09/2017 às 18:14
  • @AndersonCarlosWoss sei lá se fica maçante/complicado da maneira que fiz, mas foi possivel com pointer-events :)
    – Syzoth
    Commented 12/09/2017 às 18:58

1 Resposta 1

2

Isto só irá afetar os elementos a direita do elemento selecionado:

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

Creio que não seja possível pegar os elementos anteriores, apenas os próximos, para pegar todos que pertencem a um elemento "pai" será necessário JavaScript/jquery, no entanto é possível forçar um pouco o efeito se aplicar :hover no elemento parent, assim (no caso criei um elemento "pai" chamado .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>

No entanto o efeito ocorrerá em qualquer área do .row, então você pode usar pointer-events: none; e 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>

Mas é importante notar que o pointer-events afeta o touch e o mouse/rato de outros elementos filhos, isso claro pode ser resolvido aplicando aos elementos filhos necessários o pointer-events: auto;, por motivo usei > *

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

Extra

Se cada elemento botão tiver uma cor será necessário fazer isto separadamente, por exemplo:

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

9
  • Eu estive usando o # enquanto fazia o código, só não usei na demonstração aqui do Stack mesmo ^^ Se não tivesse usado, bem sei que os botões da frente também não mudariam de cor, já que o meu problema são os botões à esquerda daquele em que eu passarei o ponteiro do mouse em cima Commented 12/09/2017 às 18:42
  • Muito obrigado Guilherme! Pensei que fosse simples o suficiente pro CSS, mas pelo jeito vou ter que enfrentar o JavaScript. Até pesquisei e achei formas de influenciar o elemento pai a partir do filho, mas não soube o que fazer com aquele código de JQuery hahaha Você sabe se existe alguma previsão de quando estarão disponíveis os seletores nível 4 em navegadores? Commented 12/09/2017 às 18:50
  • @AndréCiappina adicionei um exemplo 100% com CSS, removi a parte sobre o possivel erro dos seletores, e adicionei explicações sobre o funcionamento do código que criei, espero que lhe seja util.
    – Syzoth
    Commented 12/09/2017 às 18:57
  • 1
    @AndersonCarlosWoss [editado] sim o pointer-events garante que a interação do touch ou mouse ocorra somente aonde foi setado pointer-events: auto;, no caso > *, ps: Resposta editada.
    – Syzoth
    Commented 12/09/2017 às 19:25
  • 1
    Primeiro uso real de pointer-events que vi, interessante até. +1
    – Woss
    Commented 12/09/2017 às 21:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .