Как при наведении(hover) на один элемент изменить несколько других?

Question

Всем привет! Возникла проблема - не могу изменить несколько элементов при наведении на 1.

.services-container:hover + .bot2{
        color: black;
    }

Вот CSS код, при котором изменяется соседний элемент, но никак не другие

HTML снизу

<div class="nav-left">
        <div class="services-container">
             <a class="nav-link bot1" data-lang="ru">Наши услуги</a>
        </div>

            <a href="/portfolio" class="nav-link bot2" data-lang="ru">Портфолио</a>
            <a href="/about" class="nav-link bot3" data-lang="ru">О нас</a>
        </div>
        
        <div class="nav-right">
            <div class="contacts-container">
                <a href="#" class="nav-link bot4" data-lang="ru">Контакты</a>    
            </div>
        </div>

Мне нужно при наведении на .bot1 изменять цвет текста .bot2 .bot3 .bot4 И соответственно при наведении на .bot2 изменять цвет текста .bot1 .bot3 .bot4 И так далее

Answer 1

Псевдоселектор has позволяет дотягиваться до чего угодно. Структура у вас неудобная, но тем и интересней дотягиваться.

Раскрашу всё при всех hover в разные цвета, ненужное удалите сами.

a {
  color: black;
  text-decoration: none;
}

.nav-left:has(.bot1:hover) {
  .bot1 {
    color: #00f;
  }

  .bot2 {
    color: #00b;
  }

  .bot3 {
    color: #008;
  }

  &~* .bot4 {
    color: #004;
  }
}

.nav-left:has(.bot2:hover) {
  .bot1 {
    color: #f00;
  }

  .bot2 {
    color: #b00;
  }

  .bot3 {
    color: #800;
  }

  &~* .bot4 {
    color: #400;
  }
}

.nav-left:has(.bot3:hover) {
  .bot1 {
    color: #f0f;
  }

  .bot2 {
    color: #b0f;
  }

  .bot3 {
    color: #80f;
  }

  &~* .bot4 {
    color: #40f;
  }
}

.nav-left:has(~* .bot4:hover) {
  .bot1 {
    color: #0f0;
  }

  .bot2 {
    color: #0b0;
  }

  .bot3 {
    color: #080;
  }

  &~* .bot4 {
    color: #040;
  }
}

<div class="nav-left">
  <div class="services-container">
    <a class="nav-link bot1" data-lang="ru">Наши услуги</a>
  </div>

  <a href="/portfolio" class="nav-link bot2" data-lang="ru">Портфолио</a>
  <a href="/about" class="nav-link bot3" data-lang="ru">О нас</a>
</div>

<div class="nav-right">
  <div class="contacts-container">
    <a href="#" class="nav-link bot4" data-lang="ru">Контакты</a>
  </div>
</div>

Answer 2

Перевод селектора на русский: body, у которого есть элемент nav-link под указателем мыши, поменяй цвет у всех вложенных в него nav-link, на которые не наведен указатель мыши.

body:has(.nav-link:hover) .nav-link:not(:hover) {
  color: red;
}

<div class="nav-left">
  <div class="services-container">
    <a class="nav-link bot1" data-lang="ru">Наши услуги</a>
  </div>

  <a href="/portfolio" class="nav-link bot2" data-lang="ru">Портфолио</a>
  <a href="/about" class="nav-link bot3" data-lang="ru">О нас</a>
</div>

<div class="nav-right">
  <div class="contacts-container">
    <a href="#" class="nav-link bot4" data-lang="ru">Контакты</a>
  </div>
</div>

Answer 3

Мне нужно при наведении на .bot1 изменять цвет текста .bot2 .bot3 .bot4 И соответственно при наведении на .bot2 изменять цвет текста .bot1 .bot3 .bot4 И так далее

Что-то так много другие написали... Вроде и покороче можно такое реализовать.

body:has(.nav-link:hover) .nav-link {
  color: red;
  /* Если наведенный не подсвечивать */
  &:hover {
    color: #000;
  }
}

<div class="nav-left">
  <div class="services-container">
    <a href='#' class="nav-link bot1" data-lang="ru">Наши услуги</a>
  </div>

  <a href="/portfolio" class="nav-link bot2" data-lang="ru">Портфолио</a>
  <a href="/about" class="nav-link bot3" data-lang="ru">О нас</a>
</div>

<div class="nav-right">
  <div class="contacts-container">
    <a href="#" class="nav-link bot4" data-lang="ru">Контакты</a>
  </div>
</div>

Answer 4

на всякий случай напомню что у псевдокласса :has() поддержка далеко не самая лучшая и потому, предложу пожалуй метод от противного с псевдоклассом :not()

для понимания какая между ними пропасть в поддержке, вот таблица:

...	edge	chrome	opera	FF	safari
:has	105	105	91	121	15.4
:not	12	1	9.5	1	3.2

пример:

.x > * {
  display: list-item;
  list-style: decimal inside;
  font: 1.5em bold;
}

.x:hover > *:not(:hover) {
  color: gray;
  opacity: .5;
}

<div class='x'>
  <a href='#'></a>
  <a href='#'></a>
  <a href='#'></a>
  <a href='#'></a>
  <a href='#'></a>
  <a href='#'></a>
</div>

p.s. а еще вам вёрстку подровнять не помешало бы...

т.е. раз уж ждёте от bot1, bot2, bot3 и bot4 одинакового поведения - суйте их в один контейнер.

в случае с GRID layout моделью - это никак не помешает сформировать из них 2 отдельных списка.

готовый вариант с GRIDом:

.x {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
}

/*************/
.x> :nth-child(-n+5) {
  grid-column: 1;
  color: red;
}

.x> :nth-child(6) {
  grid-column: 2;
  color: green;
}

.x> :nth-child(n+7) {
  grid-column: 3;
}

/*************/

.x>* {
  display: list-item;
  list-style: decimal inside;
  font: 1.5em bold;
}

.x:hover>*:not(:hover) {
  color: gray;
  opacity: .5;
}

<div class='x'>
  <a href='#'></a>
  <a href='#'></a>
  <a href='#'></a>
  <a href='#'></a>
  <a href='#'></a>
  <a href='#'></a>
  <a href='#'></a>
  <a href='#'></a>
  <a href='#'></a>
  <a href='#'></a>
</div>

БЛОГ НА HUSL

Как при наведении(hover) на один элемент изменить несколько других?

Ответы (4 шт):