Как повлиять на другие элементы при наведении div

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

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

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

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

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

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>

большое спасибо майку и Роберту за их полезные сообщения!

если у вас есть два элемента в HTML, и вы хотите, чтобы :hover над одним и целевым изменением стиля в другом два элемента должны быть непосредственно связаны-родители, дети или братья и сестры. Это означает, что два элемента либо должны быть один внутри другого, либо оба должны содержаться в одном и том же большем элементе.

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

я почти сдался и просто добавил javascript на свою страницу, но это будущее, черт возьми! Нам не нужно мириться с тем, что back sass из CSS и HTML говорит нам, где мы должны размещать наши элементы для достижения желаемых эффектов! В конце концов мы пошли на компромисс.

в то время как фактические элементы HTML в файл должен быть вложенным или содержаться в одном элементе, чтобы быть допустимым :hover цели друг к другу, css от элемент внутри #explainBox должен быть #explainBox или в #explainBox. Атрибуты позиции, присвоенные # definitions, заставляют его появляться в нужном месте (снаружи #explainBox) даже если он технически расположен в нежелательной позиции в HTML-документе.

я понимаю, что считается дурным тоном использовать то же самое #id для более чем одного элемента HTML; однако, в этом случае экземпляры #light может быть описан независимо из-за их соответствующих позиции в однозначно 'д'. Есть ли причина не повторять id#light в этом случае?

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

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

здесь .cube является CssClass из #cube.

проверен в Firefox, Chrome и края.

вот еще одна идея, которая позволяет вам влиять на другие элементы без учета какого-либо конкретного селектора и только с помощью :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>

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

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

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

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

.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 для того, чтобы изменить многие свойства различных элементов.