Question

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

我可以在html和CSS中这样做吗？
如果是这样，我该怎么做？
我可以在类方法中使用类吗？

预先感谢

Answer 1

1＆2：不，您目前无法以我所知道的任何方式在纯HTML和CSS中执行此操作。将来，您也许可以使用:has选择器。请参见以下代码片段，以快速演示如何实现：

p > a {
  color: blue;
}

p:has(a:hover) a {
  color: red;
}

<p>This is a paragraph the contains some blue <a>links</a>. There are a few different <a>links</a> in here. You can hover over any of the <a>links</a>, and in a browser which supported the :has CSS selector, all of the <a>links</a> would have the hover styles applied to them and turn red.</p>

请注意，:has查询选择器目前处于试验阶段，截至本文撰写之时，支持仅限于使用“与document.querySelector()之类的功能”，并且“不能在样式表中使用”（请参见{ {3}}，以获取更多信息。（因此，很明显，上面的代码段在浏览器支持：has选择器之前不起作用，我只是将其包含在内，以演示：has选择器如何解决该用例。）

3：第三个问题还不够清楚，我无法回答。

Answer 2

1）您可以在CSS中使用hover伪选择器来实现此效果。 2）将悬停选择器放在子链接的父链接上。 3）您可以将a替换为.link类，但这取决于您。

.links a {
  color: #333;
}

.links:hover a {
  color: #ff0000;
}

<div class="links">
  <a href="#">link 1</a>
  <a href="#">link 2</a>
  <a href="#">link 3</a>
</div>

将鼠标悬停在一个链接上时更改多个链接的颜色

2 个答案: