我有一个菜单，我想改变链接的颜色在悬停，但也改变它的所有兄弟的其他颜色。 没有JS这可能吗？
HTML:
<ul>
<li>
<a>lorem</a>
</li>
<li>
<a>ipsum</a>
</li>
</ul>
SCSS:
ul {
$primary-color: orange;
> li {
> a {
color: #000;
border-bottom: solid 2px transparent;
&:hover {
color: $primary-color;
border-color: $primary-color;
& + a:not(:hover) {
color: red;
}
}
}
}
}
当一个a标记悬停时，您不能影响其他a标记。 您唯一的真正选择是在ul悬停时应用“其他”颜色，然后在链接悬停时覆盖“其他”颜色。
null
ul > li > a {
color: #000;
border-bottom: solid 2px transparent;
}
ul > li > a:hover {
color: orange;
border-color: orange;
}
ul:hover a {
color: red;
}<ul>
<li>
<a>lorem</a>
</li>
<li>
<a>ipsum</a>
</li>
<li>
<a>sit</a>
</li>
<li>
<a>amet</a>
</li>
</ul>