AdminLTE 3中Font Awesome图标链接hover黑色背景移除方法咨询

嘿，我来帮你搞定这个问题！你之前写的 CSS 没生效，主要是两个小问题：一是选择器的写法有误，a :hover 里的空格会选中 a 标签内的子元素的 hover 状态，而不是 a 标签本身的 hover；二是 AdminLTE 自带的样式优先级比你的自定义样式高，导致被覆盖了。

给你几个可行的解决方案，按需选择：

方案一：精准匹配你的操作链接 #

如果你的图标链接是编辑、删除这类操作按钮，你可以给这些 a 标签加个统一的类，比如 action-link，然后用下面的 CSS 覆盖：

/* 给操作链接的hover状态下的图标移除背景 */
a.action-link:hover i {
    background-color: transparent;
}

对应的 HTML 改成：

<a href="/products/2/edit" class="action-link"><i class="fas fa-edit"></i></a>

方案二：直接覆盖 AdminLTE 的全局链接 hover 样式 #

如果这个黑色背景是 AdminLTE 全局链接的默认 hover 样式导致的，你可以直接针对内容区域的链接进行覆盖：

/* 移除content-wrapper内所有a链接hover时的背景 */
.content-wrapper a:hover {
    background-color: transparent;
}

方案三：用开发者工具定位根源（最推荐） #

最稳妥的方式是用浏览器的开发者工具找到具体是哪个样式在搞事情：

1. 按 F12 打开开发者工具
2. 点击左上角的「选择元素」按钮，选中你的图标链接
3. 在右侧样式面板里，找到 :hover 状态（点击样式面板里的 :hov 按钮，勾选 hover）
4. 找到带有黑色背景的 CSS 规则，然后写一个优先级更高的选择器去覆盖它

举个例子，如果查到是 .card-body a:hover 这个规则加的背景，那你就写：

.card-body a:hover i {
    background: none !important;
}

（!important 是万不得已才用的，优先用更精准的选择器来提高优先级）

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