Как на HTML и css связать два элемента по id ? (нужно без JS)

Рейтинг: 0Ответов: 1Опубликовано: 22.07.2023

Есть три карточки и три точки пагинации, при наведении на первую карточку должен меняться цвет соответствующей точки в пагинации. Никак не могу связать. Код ниже

<div class="circle" id="circle-1"></div>___

#card-1:focus ~ .pagination #circle-1 {
  background-color: var(--color-primary);
}```

может не правильный подход в принципе ? (нужно без JS)
css html hover focus tag
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Если элементы находятся на разных уровнях иерархии, то изменение свойств одного элемента при наведении на другой элемент с помощью CSS невозможно. Комбинатора для такого подхода нет. Без JS не обойтись. Но если вы разместите все элементы внутри одного блока, то можно использовать родственный комбинатор ~:

.container {
  display: flex;
  flex-wrap: wrap;
  width: 330px;
}

.card {
  width: 100px;
  height: 100px;
  background: #013220;
  margin-right: 10px;
  margin-bottom: 10px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #000;
  margin-right: 10px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

#card-1:hover ~ #circle-1 {
  background: #0ff;
}

#card-2:hover ~ #circle-2 {
  background: #0ff;
}

#card-3:hover ~ #circle-3 {
  background: #0ff;
}
<div class="container">
  <div class="card" id="card-1">1</div>
  <div class="card" id="card-2">2</div>
  <div class="card" id="card-3">3</div>
  
  <div class="circle" id="circle-1">1</div>
  <div class="circle" id="circle-2">2</div>
  <div class="circle" id="circle-3">3</div>
</div>