使多个元素悬停

Question

我在一个div中有三个a标签，它们都带有href

.title {
text-decoration: none !important;
color: #000000;        
}
.title:hover{
color: #f20d20;
}

<div>
<a class="title" href="google.com">title 1</a>   
<a class="title" href="google.com">title 2</a>
<a class="title" href="google.com">title 3</a>  
</div>

我希望这样，如果用户将鼠标悬停在一个元素上，所有元素都会改变悬停颜色。我确信这是一个简单的问题，但是我不能使它工作。

Answer 1

添加悬停到父元素，并为项目添加颜色:

div:hover title {
color: #f20d20;
}

Answer 2

您可以使用div:hover

不能选择元素的所有兄弟元素。你可以用.title ~ .title选择标题后的悬停标题，但对于之前的标题在css中没有办法。

Answer 3

请检查下面的代码好吗?希望它对你有用。在这里，我添加了display:inline-block属性到父div，这样它就不会覆盖整个悬停块。还添加了悬停到父div和颜色的链接。

div {
display:inline-block;
}
.title {
text-decoration: none !important;
color: #000000;  
}
div:hover a{
color: #f20d20;
}

<div>
<a class="title" href="google.com">title 1</a>   
<a class="title" href="google.com">title 2</a>
<a class="title" href="google.com">title 3</a>  
</div>