有没有办法使两个同级元素互相影响？

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，所以我不确定我缺少什么...

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>