将鼠标悬停在单个链接上时如何更改其他链接的颜色？

Question

当我将鼠标悬停在单个链接上时，我想更改其他链接的颜色。

例如，当我将鼠标悬停在单个链接上时，其余链接的颜色不同，即黄色，但我悬停的一个链接仍然是蓝色。

a, a:visited, a:active {
  text-decoration: none;
  color: red;
}

a:hover {
  color: blue;
}

<div>
  <a href="#about">About</a>
  <a href="#projects">Projects</a>
  <a href="#contact">Contact</a>
</div>

Answer 1

您可以为父级应用悬停选择器。

a,
a:visited,
a:active {
  text-decoration: none;
  color: red;
}

.parent:hover a {
  color: yellow;
}

.parent a:hover {
  color: blue;
}

<div class="parent">
  <a href="#about">About</a>
  <a href="#projects">Projects</a>
  <a href="#contact">Contact</a>
</div>