时间戳

首页 > 解决方案 > 让div中的两个元素悬停在一起

html - 让div中的两个元素悬停在一起

问题描述

我有一个 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>

标签： htmlcss

解决方案

您当前代码的问题是div.test-hover :hover选择器正在为悬停的子元素设置样式。但是，您似乎想要的只是在包装器悬停时设置a标签的样式。这是带有固定代码的片段：div.test-hoverdiv

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

推荐阅读