悬停在单个链接上时如何更改其他链接的颜色？ [复制]答案

【问题标题】：How to change the colours of other links when hover on a single link? [duplicate]悬停在单个链接上时如何更改其他链接的颜色？ [复制]
【发布时间】：2022-01-18 00:56:49
【问题描述】：

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

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

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>

【问题讨论】：

视觉上这很令人困惑。您想这样做有什么特别的原因吗？

标签： javascript html css

【解决方案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>

【讨论】：