当我将鼠标悬停在位于它旁边的不同元素上时，我试图更改该元素在我的网页上的颜色。我曾尝试使用子/兄弟选择器“+/~”，但无济于事。我在我的代码中使用了很多 Bootstrap 4 语法，这<i>是一个来自 FontAwesome 的图标。我只是想更改将<i>鼠标悬停在“支持我们”文本上时的颜色。任何帮助将不胜感激！
HTML 和 CSS：
.Kicker {
color: #05ce78;
}
i.Kicker:hover {
color: black;
}
a {
color: inherit;
text-decoration: inherit;
cursor: inherit;
}
a.hoverText1:hover + .Kicker {
color: black;
text-decoration: inherit;
transition: 0.1s;
}<div class="row align-items-center mt-4 ml-0">
<h1 class="mr-3 mt-0 text-light" style="font-family: future; cursor: pointer;"><a class="hoverText1" href="http://www.google.com">Support Us:</a></h1>
<i style="cursor: pointer;" class="Kicker fab fa-kickstarter fa-4x"></i>
</div>您只能通过 CSS 访问与当前元素处于同一级别或嵌套在当前元素中的元素。
相反，.hoverText1我们需要将“悬停”伪类放在元素上.text-light
结果
.Kicker {
color: #05ce78;
}
i.Kicker:hover {
color: black;
}
a {
color: inherit;
text-decoration: inherit;
cursor: inherit;
}
.text-light:hover + .Kicker {
color: black;
text-decoration: inherit;
transition: 0.1s;
}<div class="row align-items-center mt-4 ml-0">
<h1 class="mr-3 mt-0 text-light" style="font-family: future; cursor: pointer;"><a class="hoverText1" href="http://www.google.com">Support Us:</a></h1>
<i style="cursor: pointer;" class="Kicker fab fa-kickstarter fa-4x">icon-placeholder</i>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句