Как при наведении на один блок изменять стили другого, когда блоки находятся в разных местах?

Question

[Вика Мармеладка]

Мне нужно что бы при наведении на один из li, изменялись стили блоков figures. В начале я хотел сделать по красоте, такой формой:

.what-we-do__list:nth-child(1):hover figures__hover-1 {
    //какие то стили 
}

Но вскоре понял что она не сработает. Ладно думаю, сделаю не очень красиво, добавлю классы каждой лишке и по ним буду обращаться на прямую. Но нет! И это не сработало. После узнал что существуют такие символы как "+" и "~", отвечающие за распространение стилей, либо глобально, либо локально. Но это не работает, я не понимаю почему.

<div class="what-we-do__inner blue-bg">
      <div class="wrap">
        <div class="figures">
          <div class="figures__1 figures__hover-1">
            <svg class="icon">
              <use xlink:href="/assets/img/svg/sprite.svg#howWeDoTriangle_1"></use>
            </svg>
          </div>
          <div class="figures__2 figures__hover-2">
            <svg class="icon">
              <use xlink:href="/assets/img/svg/sprite.svg#howWeDoTriangle_2"></use>
            </svg>
          </div>
          <div class="figures__3 figures__hover-3">
            <svg class="icon">
              <use xlink:href="/assets/img/svg/sprite.svg#howWeDoTriangle_3"></use>
            </svg>
          </div>
        </div>
        <div class="logo">
          <img src="/assets/img/how-we-do-avd.png" alt="">
        </div>
        <ul class="what-we-do__list">
          <li class="what-we-do__li-1"><a href="javascript:void(0)"><span class="title">Web
                development</span><span class="subtitle">(sites, landing pages etc)</span></a>
          </li>
          <li class="what-we-do__li-2"><a href="javascript:void(0)"><span class="title">Building of
                applications for different platforms</span></a></li>
          <li class="what-we-do__li-3"><a href="javascript:void(0)"><span class="title">Systems for internal
                stakeholders</span><span class="subtitle">(finance, sales, logistics)</span></a></li>
          <li class="what-we-do__li-4"><a href="javascript:void(0)"><span class="title">Maintenance of digital
                assets </span><span class="subtitle">(app, sites, systems etc)</span></a></li>
          <li class="what-we-do__li-5"><a href="javascript:void(0)"><span class="title">Technical
                infrastructure providing</span><span class="subtitle">(hosting, licenses etc)</span></a>
          </li>
          <li class="what-we-do__li-6"><a href="javascript:void(0)"><span class="title">Analytics</span></a>
          </li>
          <li class="what-we-do__li-7"><a href="javascript:void(0)"><span class="title">Media
                support</span></a></li>
        </ul>
        <a href="javascript:void(0)" class="more gray-link">
          <div class="arrow arrow__left">
            <svg class="icon ">
              <use xlink:href="/assets/img/svg/sprite.svg#moreArrow"></use>
            </svg>
          </div>
          <span>Explore our capabilities</span>
        </a>
      </div>
    </div>

Answer 1

[Сергей delphinpro]

Чтобы сработало, фигуры должны быть расположены в коде после списка
Причем списка не должно быть =)

пример

<div class="hover_1">2321321
<div class="hover_2">2321321
<div class="hover_3">2321321

<div class="hovered_1">
<div class="hovered_2">
<div class="hovered_3">

.hover_1:hover ~ .hovered_1 {}
.hover_2:hover ~ .hovered_2 {}
.hover_3:hover ~ .hovered_3 {}

Фигуры могут располагаться в своем контейнере:

<div class="hover_1">2321321
<div class="hover_2">2321321
<div class="hover_3">2321321

<div class="container">
  <div class="hovered_1">
  <div class="hovered_2">
  <div class="hovered_3">
</div>

.hover_1:hover ~ .container .hovered_1 {}
.hover_2:hover ~ .container .hovered_2 {}
.hover_3:hover ~ .container .hovered_3 {}

Comments

[Вика Мармеладка]

Огромное вам спасибо! Сработало. Но у меня есть пару вопросов, почему так?

1. Почему фигуры должны быть после наводящего объекта
   
2. Почему из списка они не работают
   
3. Зачем вообще нужны эти доп. символы + и ~ когда можно без них в большинстве случаев справляться. Как они работают? (первый раз с ними столкнулся, в инете нигде не написано)
   

[Сергей delphinpro]

Рич Пиана, Это довольно обшиирная тема. Если коротко, то так работает css.
1. Нельзя обращаться к предыдущим элементам.
2. Нельзя обращаться к родительским элементам.
На эту тему есть статьи в интернет с подробным объяснением причин.
3. Это всего лишь еще один способ обращения к элементам. Еще один тип селекторов. С таким же успехом можно спросить зачем вообще нужет first-child или last-child, ведь можно и без них обойтись с помощью nth-child. Они есть и это прекасно, что есть дополнительные возможности.
Как работают, тоже прекрасно описано в документации на MDN. "~" - все сестринские элементы, "+" - ближайший сестринский элемент.

[Сергей delphinpro]

Рич Пиана, https://css-live.ru/ классный сайт, где встречаются мозгодробительные статьи по разным нюансам css
категорически рекомендую к изучению и подписке на новые статьи.

[Вика Мармеладка]

Сергей delphinpro, Подписался, добавил в закладки, выжег доменный адрес у себя на руке))
Но вот еще, почему все таки такая форма не работает, ведь все логично прописано?

.what-we-do__list:nth-child(1):hover .figures__hover-1 {
    //какие то стили 
}

[Сергей delphinpro]

Рич Пиана, нет. с точки зрения css не логично. во первых я уже сказал, что фигуры должны быть после списка.
Во-вторых, если я правильно понял вашу идею, запись .what-we-do__list:nth-child(1):hover означает первый список, а не первый элемент списка.

[Сергей delphinpro]

Причем первый список в потоке родителя. Если перед списком есть какой-то другой элемент, список уже не будет первым.

[Сергей delphinpro]

Еще точнее, первый элемент, если у него есть класс what-we-do__list
Прошу заметить, что это совсем не то же самое что первый элемент с классом what-we-do__list

[Вика Мармеладка]

Сергей delphinpro, Понял) Получается единственный вариант это только непосредственное обращение через индивидуальные классы?

[Сергей delphinpro]

Рич Пиана, тут можно рассматривать два варианта.
1. Объединить зависимые блоки в один элемент, если это возможно с точки зрения верстки

<div>
 <a> </a>
 <figure> </figure>
</div>
<div>
 <a> </a>
 <figure> </figure>
</div>
<div>
 <a> </a>
 <figure> </figure>
</div>

Тут можно один css правилом обойтись

2. Или использовать javascript.

Я бы что-то из этого выбрал. Не стал бы писать персональные классы каждому элементу. Тем более это не всегда возможно, если речь идет об интеграции в какую-то CMS.

[Вика Мармеладка]

Сергей delphinpro, Я рассматривал эти варианты, единственный нормальный был для меня это js. но вы только гляньте на это чудо-юдо) Это мой вопрос по тому, как сократить код потому что это бардак) А смысл всей затеи таков, при наведении на один из элементов, фигуры должны меняться местами, при чем все три одновременно.
Как сократить код?

Так вот мне кажется что уж лучше пусть это будет в css чем в js... пусть и с лишними классами на борту...

Answer 2

[Bohdan Petrov]

В styled components данная возможность реализована.
https://styled-components.com/docs/advanced#referr...

Comments

[Сергей delphinpro]

Это же всего лишь синтаксический сахар. В итоге все равно получается Link:hover Icon

вот если бы по ховеру на Icon стилизовался Link - другое дело.

[Bohdan Petrov]

Сергей delphinpro, вы плохо прочли доку.
По ховеру на Icon и стилизуется Link