将鼠标悬停在一个链接上更改链接本身和另一个链接的颜色反之亦然

问题描述

我有以下问题（可能很容易解决，让我们看看:)）

.title:hover ~ .intro a {color:red;}
.title a:hover,.intro a:hover{color:red;}

<div class="gri">

 <p>don't change me</p>

   <div class="title">
    <h3><a href="http://google.com">title</a></h3>
   </div>

<h2>don't change me</h2>

  <div class="intro">
   <a href="http://google.com" class="excerpt">intro text blah blah</a>
  </div>

</div>

仅使用 CSS 而不更改 HTML 代码，我如何才能达到以下目标：

将鼠标悬停在“标题”上会导致标题变为红色并且介绍也变为红色。介绍也一样（将鼠标悬停在介绍上，介绍和标题变为红色）。

有什么建议吗？我已经尝试过不同的 CSS 组合，但无济于事。

谢谢

大卫

解决方法

根据https://www.w3schools.com/css/css_combinators.asp

定位相邻的兄弟选择器 ~ 用于一般兄弟选择器

然而，相邻意味着“立即跟随”，there's no equivalent for previous sibling。因此，您不能使用纯 CSS 来做到这一点。

在这种情况下，您需要使用 javascript，或者重构 HTML 的结构方式。

html mousehover