Есть ли способ заставить два родственных элемента влиять друг на друга? - PullRequest
Новая
       10

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

3 голосов
/ 09 октября 2019

Скажем, у меня есть два элемента, "A" и "B" ... когда вы наводите курсор на A, я хочу, чтобы B изменил цвет, а когда вы наводите курсор на B, я хочу, чтобы A изменил цвет ... 

<ul>
    <li>A</li>
    <li>B</li>
</ul>

Я нашел обычные родственные селекторы, такие как (~) и (+), но они позволили бы только A влиять на B. Я мог сделать ul { display: flex; } и поменять местами A и B, но этопозволил бы только B влиять на A.

Все на веб-сайте, который я создаю, работает, я просто хочу создать своего рода систему "парных ссылок" ... в основном, две ссылки, которые, если они есть, находятсяболее того, оба ведут себя так, как будто они зависли над ...

Я пытался (-) просто посмотреть, сработает ли это, но не получилось ... Я пытался зависнуть над родителемс (>), но это просто заставило все ссылки работать так, как будто они зависали (я так и думал, но мне все еще нужно было попробовать) ... Честно говоря, я не делал html и css вечно,так что я не уверен, что мне не хватает ...

1 Ответ

5 голосов
/ 09 октября 2019

Вы можете добиться чего-то подобного, выделив все элементы списка накрываемого <ul> и сбросив стиль элемента списка наведенного списка: 

ul {
  padding: 0;
  list-style: none;
}

ul:hover > .item {
  color: red;
}

li.item:hover {
  color: initial;
}
<ul>
  <li class="item">A</li>
  <li class="item">B</li>
</ul>
...