Como afetar outros elementos quando um elemento é pairado

O que eu quero fazer é que quando um certo divé pairado, isso afetaria as propriedades de outro div.

Por exemplo, nesta demonstração do JSFiddle , quando você passa o mouse sobre #cubeele, muda o, background-colormas o que eu quero é que, quando passe o mouse #container, #cubeseja afetado.

div {
  outline: 1px solid red;
}
#container {
  width: 200px;
  height: 30px;
}
#cube {
  width: 30px;
  height: 100%;
  background-color: red;
}
#cube:hover {
  width: 30px;
  height: 100%;
  background-color: blue;
}

<div id="container">

  <div id="cube">
  </div>

</div>

Se o cubo estiver diretamente dentro do contêiner:

#container:hover > #cube { background-color: yellow; }

Se o cubo estiver próximo (após a tag de fechamento dos contêineres), o contêiner:

#container:hover + #cube { background-color: yellow; }

Se o cubo estiver em algum lugar dentro do contêiner:

#container:hover #cube { background-color: yellow; }

Se o cubo for um irmão do contêiner:

#container:hover ~ #cube { background-color: yellow; }

Neste exemplo em particular, você pode usar:

#container:hover #cube {
    background-color: yellow;   
}

Este exemplo funciona apenas desde que cubeé filho de container. Para cenários mais complicados, você precisará usar CSS diferente ou JavaScript.

O uso do seletor de irmãos é a solução geral para estilizar outros elementos ao passar o mouse sobre um determinado elemento, mas funciona apenas se os outros elementos seguirem o elemento especificado no DOM . O que podemos fazer quando os outros elementos devem realmente estar antes do pairar? Digamos que queremos implementar um widget de classificação da barra de sinal como o abaixo:

Na verdade, isso pode ser feito facilmente usando o modelo flexbox CSS, configurando flex-directionpara reverse, para que os elementos sejam exibidos na ordem oposta à que estão no DOM. A captura de tela acima é de um widget implementado com CSS puro.

O Flexbox é muito bem suportado por 95% dos navegadores modernos.

.rating {
  display: flex;
  flex-direction: row-reverse;
  width: 9rem;
}
.rating div {
  flex: 1;
  align-self: flex-end;
  background-color: black;
  border: 0.1rem solid white;
}
.rating div:hover {
  background-color: lightblue;
}
.rating div[data-rating="1"] {
  height: 5rem;
}
.rating div[data-rating="2"] {
  height: 4rem;
}
.rating div[data-rating="3"] {
  height: 3rem;
}
.rating div[data-rating="4"] {
  height: 2rem;
}
.rating div[data-rating="5"] {
  height: 1rem;
}
.rating div:hover ~ div {
  background-color: lightblue;
}

<div class="rating">
  <div data-rating="1"></div>
  <div data-rating="2"></div>
  <div data-rating="3"></div>
  <div data-rating="4"></div>
  <div data-rating="5"></div>
</div>

Muito obrigado a Mike e Robertc por suas publicações úteis!

Se você possui dois elementos no HTML e deseja :hoversobrepor um e direcionar uma mudança de estilo no outro, os dois elementos devem estar diretamente relacionados - pais, filhos ou irmãos. Isso significa que os dois elementos devem estar um dentro do outro ou devem estar contidos no mesmo elemento maior.

Eu queria exibir definições em uma caixa no lado direito do navegador enquanto meus usuários liam o meu site e os :hovertermos destacados; portanto, não queria que o elemento 'definition' fosse exibido dentro do elemento 'text'.

Eu quase desisti e acabei de adicionar javascript à minha página, mas este é o futuro! Não devemos ter que tolerar o CSS e HTML nos dizendo onde devemos colocar nossos elementos para obter os efeitos desejados! No final, nos comprometemos.

Embora os elementos HTML reais no arquivo devam estar aninhados ou contidos em um único elemento para serem :hoverdestinos válidos um para o outro, o positionatributo css pode ser usado para exibir qualquer elemento onde você desejar. Eu usei position: Fixed para colocar o destino da minha :hoveração onde eu queria na tela do usuário, independentemente da sua localização no documento HTML.

O html:

<div id="explainBox" class="explainBox"> /*Common parent*/

  <a class="defP" id="light" href="http://en.wikipedia.or/wiki/Light">Light                            /*highlighted term in text*/
  </a> is as ubiquitous as it is mysterious. /*plain text*/

  <div id="definitions"> /*Container for :hover-displayed definitions*/
    <p class="def" id="light"> /*example definition entry*/ Light:
      <br/>Short Answer: The type of energy you see
    </p>
  </div>

</div>

O css:

/*read: "when user hovers over #light somewhere inside #explainBox
    set display to inline-block for #light directly inside of #definitions.*/

#explainBox #light:hover~#definitions>#light {
  display: inline-block;
}

.def {
  display: none;
}

#definitions {
  background-color: black;
  position: fixed;
  /*position attribute*/
  top: 5em;
  /*position attribute*/
  right: 2em;
  /*position attribute*/
  width: 20em;
  height: 30em;
  border: 1px solid orange;
  border-radius: 12px;
  padding: 10px;
}

Neste exemplo, o destino de um :hovercomando de um elemento dentro #explainBoxdeve ser #explainBoxou também dentro #explainBox. Os atributos de posição atribuídos a #definitions forçam a exibição no local desejado (fora #explainBox), mesmo que tecnicamente esteja localizado em uma posição indesejada no documento HTML.

Entendo que é considerado incorreto usar o mesmo #idpara mais de um elemento HTML; no entanto, neste caso, as instâncias de #lightpodem ser descritas independentemente, devido às suas respectivas posições em #idelementos exclusivos . Existe alguma razão para não repetir o id #lightcaso?

Só isso funcionou para mim:

#container:hover .cube { background-color: yellow; }

Onde .cubeestá CssClass do #cube.

Testado no Firefox , Chrome e Edge .

Aqui está outra idéia que permite afetar outros elementos sem considerar nenhum seletor específico e usando apenas o :hoverestado do elemento principal.

Para isso, contarei com o uso de propriedades personalizadas (variáveis ​​CSS). Como podemos ler na especificação :

Propriedades personalizadas são propriedades comuns , portanto, podem ser declaradas em qualquer elemento, são resolvidas com as regras normais de herança e cascata ...

A idéia é definir propriedades customizadas no elemento principal e usá-las para estilizar elementos filhos e, como essas propriedades são herdadas, precisamos alterá-las no elemento principal ao passar o mouse.

Aqui está um exemplo:

#container {
  width: 200px;
  height: 30px;
  border: 1px solid var(--c);
  --c:red;
}
#container:hover {
  --c:blue;
}
#container > div {
  width: 30px;
  height: 100%;
  background-color: var(--c);
}

<div id="container">
  <div>
  </div>
</div>

Por que isso pode ser melhor do que usar o seletor específico combinado com o hover?

Posso fornecer pelo menos dois motivos que tornam este método um bom ponto a considerar:

1. Se tivermos muitos elementos aninhados que compartilham os mesmos estilos, isso evitará um seletor complexo para segmentar todos eles em foco. Usando propriedades personalizadas, simplesmente alteramos o valor ao passar o mouse sobre o elemento pai.
2. Uma propriedade customizada pode ser usada para substituir um valor de qualquer propriedade e também um valor parcial dela. Por exemplo, podemos definir uma propriedade personalizada para uma cor e podemos usá-lo dentro de um border, linear-gradient, background-color, box-shadowetc. Isso irá evitar nos zerando todas estas propriedades em foco.

Aqui está um exemplo mais complexo:

.container {
  --c:red;
  width:400px;
  display:flex;
  border:1px solid var(--c);
  justify-content:space-between;
  padding:5px;
  background:linear-gradient(var(--c),var(--c)) 0 50%/100% 3px no-repeat;
}
.box {
  width:30%;
  background:var(--c);
  box-shadow:0px 0px 5px var(--c);
  position:relative;
}
.box:before {
  content:"A";
  display:block;
  width:15px;
  margin:0 auto;
  height:100%;
  color:var(--c);
  background:#fff;
}

/*Hover*/
.container:hover {
  --c:blue;
}

<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>

Como podemos ver acima, precisamos apenas de uma declaração CSS para alterar muitas propriedades de diferentes elementos.