有没有一种方法可以让两个相邻的元素互相影响？

Question

假如我有两个元素，"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了，所以我不确定我缺少什么...

- Porcupine The Cat

Answer 1

当鼠标悬停在 <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>

- Ori Drori