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

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

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

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

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

Это можно сделать легко с помощью CSS flexbox модель, установив flex-direction to 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>

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

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

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

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

в то время как фактические элементы HTML в файл должен быть вложенным или содержаться в одном элементе, чтобы быть допустимым :hover цели друг к другу, css position атрибут может использоваться для отображения любого элемента, где вы хотите. Я использовал position: fixed для размещения цели my :hover действие, где я хотел его на экране пользователя, независимо от его местоположения в HTML-документе.

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>

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;
}

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

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

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

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

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

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

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