Як вплинути на інші елементи, коли один елемент завис

Що я хочу зробити, це коли колись divзавис, це вплине на властивості іншого div.

Наприклад, в цьому JSFiddle демо , при наведенні миші на #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>

Якщо куб знаходиться безпосередньо всередині контейнера:

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

Якщо куб знаходиться поруч (після закриття тегу контейнерів), контейнер:

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

Якщо куб знаходиться десь усередині контейнера:

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

Якщо куб є побратимом контейнера:

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

У цьому конкретному прикладі ви можете використовувати:

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

Цей приклад працює лише з часів cubeдитини container. Для складніших сценаріїв вам потрібно буде використовувати різні CSS або використовувати JavaScript.

Використання селектора сестер є загальним рішенням для стилізації інших елементів під час наведення курсору на заданий, але він працює лише в тому випадку, якщо інші елементи слідують за даними у DOM . Що ми можемо зробити, коли інші елементи насправді повинні бути перед завислими? Скажімо, ми хочемо реалізувати віджет з оцінки сигнальної смуги на зразок наведеного нижче:

Це дійсно може бути легко зробити з допомогою моделі Flexbox CSS, встановивши 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 на свою сторінку, але це майбутнє, бовтайте це! Нам не доведеться миритися із зворотним sass від CSS та HTML, що вказує нам, де ми повинні розмістити наші елементи для досягнення бажаних ефектів! Врешті-решт ми пішли на компроміс.

Хоча фактичні елементи HTML у файлі повинні бути або вкладеними, або міститися в одному елементі, щоб бути дійсними :hoverцілями один для одного, positionатрибут css може використовуватися для відображення будь-якого елемента, де завгодно. Я використовував позицію: фіксований, щоб розмістити ціль моєї :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можуть бути описані незалежно через їх відповідні позиції в унікально #idd-елементах. Чи є причина, щоб не повторити це id #lightв цьому випадку?

Тільки це працювало для мене:

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

Де .cubeCssClass #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т.д. Це дозволить уникнути нас перевстановлення всіх ці властивостей при наведенні курсору миші.

Ось більш складний приклад:

.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 , щоб змінити багато властивостей різних елементів.