Я создаю промежуток, который будет отображаться при зависании, но я хотел бы, чтобы он отображался при наведении курсора на каждую часть div [duplicate]

Использование селектора sibling - это общее решение для стилизации других элементов при наведении курсора на заданный, но оно работает , только если другие элементы следуют за данным в DOM . Что мы можем сделать, когда другие элементы должны быть на самом деле до зависания? Предположим, что мы хотим реализовать виджет оценки уровня сигнала, подобный приведенному ниже:

Это можно легко сделать с использованием модели flexbox CSS, установив flex-direction - reverse, так что элементы отображаются в противоположном порядке от того, который находится в DOM.

Flexbox очень хорошо поддерживается на 95% современных браузеров.

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

Только это сработало для меня:

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

Где .cube - CssClass для #cube.

Проверено в Firefox, Chrome и Edge.

В этом конкретном примере вы можете использовать:

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

Это работает только с cube - это ребенок из container. Для более сложных сценариев вам нужно будет использовать javascript.

Вот еще одна идея, которая позволяет вам воздействовать на другие элементы без учета какого-либо конкретного селектора и только с использованием состояния :hover основного элемента.

Для этого я буду полагаться на использование настраиваемых свойств (переменные CSS). Как мы можем прочитать в спецификации :

Пользовательские свойства являются обычными свойствами, поэтому они могут быть объявлены на любом элементе, разрешены с нормальным наследованием и каскадными правилами. ..

Идея состоит в том, чтобы определить пользовательские свойства в основном элементе и использовать их для стилизации дочерних элементов, и поскольку эти свойства наследуются, нам просто нужно изменить их в главном элементе при наведении.

Вот пример:

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

Почему это может быть лучше, чем использование специального селектора в сочетании с hover?

Я могу предоставить по крайней мере 2 причины, которые делают этот метод хорошим:

1. Если у нас есть много вложенных элементов, которые имеют одни и те же стили, это будет избегайте сложного селектора, чтобы нацелить их на зависание. Используя пользовательские свойства, мы просто изменяем значение при зависании родительского элемента.
2. Пользовательское свойство может использоваться для замены значения любого свойства, а также его частичного значения. Например, мы можем определить настраиваемое свойство для цвета, и мы используем его в пределах border, linear-gradient, background-color, box-shadow и т. Д. Это позволит нам отказаться от всех этих свойств при наведении.

Вот более сложный пример:

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

Как мы видим выше, нам нужен только один Объявление CSS для изменения многих свойств различных элементов.