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

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

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>