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

Я думаю, что это очень простой вопрос, но я не уверен, как это можно сделать.

Что я хочу сделать, это когда определенный div зависает, это повлияет на свойства другого div.

Например, в этот простой пример, когда вы наведите указатель мыши на #cube, он меняет background-color, но я хочу, чтобы когда Я нажимаю на #container, #cube.

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>

Ответы

Ответ 1

Если куб находится непосредственно внутри контейнера:

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

Если куб рядом с (после закрытия контейнера), контейнер:

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

Если куб находится где-то внутри контейнера:

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

Если куб является дочерним элементом контейнера:

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

Ответ 2

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

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

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

Ответ 3

Использование селектора 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>

Ответ 4

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

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

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

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

В то время как фактические элементы HTML в файле должны быть либо вложенными, либо содержащимися в одном элементе, чтобы быть допустимыми :hover мишенями друг к другу, атрибут css position может использоваться для отображения любого элемента, где когда-либо вы хотите. Я использовал позицию: исправлено, чтобы разместить цель моего действия :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;
}

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

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

Ответ 5

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

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

Где .cube - это CssClass #cube.

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

Ответ 6

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