使div中的两个元素悬停在一起

Question

我有一个 div，里面有两个 a 元素。我想要它，所以如果你将鼠标悬停在 a 元素之一上，它们都会改变颜色。我认为将 div 应用于 CSS 类可以使其工作，但它仍然只改变一个。

div.test-hover :hover {
  color: #f20d20;
}

<div class="test-hover">
  <a class="article-title" href="google.com">This is main title</a>
  <br/>
  <a class="article-title" href="google.com">title</a>
</div>

Answer 1

当前代码的问题是

div.test-hover :hover

选择器正在对悬停的子元素进行样式设置。然而，您似乎想要的只是当包装器

a

悬停时，在

div.test-hover

内设置

div

标签的样式。这是带有固定代码的片段：

.test-hover:hover a {
  color: #f20d20;
}

<div class="test-hover">                                        
    <a class="article-title" href="google.com">This is main title</a>
    <br/>
    <a class="article-title" href="google.com">title</a>
</div>