使多个元素悬停[重复]答案

【问题标题】：make multiple elements hover [duplicate]使多个元素悬停[重复]
【发布时间】：2021-10-12 02:13:31
【问题描述】：

我在一个 div 中有三个 a 标签，都带有 hrefs

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

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

【问题讨论】：

标签： html css

【解决方案1】：

将悬停添加到父项并为项目着色：

div:hover title {
  color: #f20d20;
}

【讨论】：

标题是否有边距？

【解决方案2】：

您可以使用div:hover

您不能选择一个元素的所有同级元素。您可以使用.title ~ .title 选择标题后跟悬停标题，但对于以前的标题，css 中没有办法。

【讨论】：

【解决方案3】：

你能检查一下下面的代码吗？希望它对你有用。在这里，我在父 div 中添加了 display:inline-block 属性，这样它就不会在悬停时覆盖整个块。还为父 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>

【讨论】：