如何移除特定元素（fa fa-house图标）的:hover效果？

先修正你原始代码里的两处语法错误：

• HTML中<ul>的闭合标签写错了，应该是</ul>
• <a>标签里多了一个多余的</i>，需要删除

接下来针对需求修改代码即可：

修改后的完整代码 #

<div class="menu-bar">
    <ul>
        <li><a href="/Home/index.html"> <i class="fa fa-house"></i>Home</a></li>
    </ul>
</div>

<style>
.menu-bar ul li a:hover {
  color: black;
  transition: all 0.2s;
  border-inline-end: 2px solid;
  border-block-end: 2px solid;
}

/* 让fa-house图标不受a标签hover的颜色影响 */
.menu-bar ul li a .fa.fa-house:hover {
  color: inherit; /* 继承a标签未hover时的颜色，也可以直接写你想要的固定颜色，比如#666 */
}
</style>

说明 #

原来的a:hover规则会让链接内的所有内容（图标+文字）都变成黑色，新增的CSS规则专门针对.fa.fa-house图标，强制它在hover时保持原始颜色（用inherit继承父元素未hover状态的颜色，或者直接指定固定色值），这样就只有文字会在hover时变黑，图标完全不受hover效果影响。

内容的提问来源于stack exchange，提问作者user20404911