使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选择器对悬停的子元素进行样式化。但是，当包装器div悬停时，您似乎想要的只是样式div.test-hover内部的a标签。下面是固定代码的代码片段:

.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>