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

Мне нужно что бы при наведении на один из 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>
  • Вопрос задан
  • 244 просмотра
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Чтобы сработало, фигуры должны быть расположены в коде после списка
Причем списка не должно быть =)

пример

<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 {}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
mindyourlifeguide
@mindyourlifeguide
В styled components данная возможность реализована.
https://styled-components.com/docs/advanced#referr...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы