图标链接上没有背景颜色答案

【问题标题】：No background color on icon link图标链接上没有背景颜色
【发布时间】：2020-08-19 12:06:11
【问题描述】：

我正在使用带有超棒字体图标的 AdminLTE 3 主题作为操作链接：

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

渲染的页面看起来不错，图标背景是透明的。当我将鼠标悬停在图标上时，图标周围会出现黑色背景。

如何去除这个黑色背景？

我试过了，但什么也没发生：

i, a :hover{
    background: none;
}

【问题讨论】：

试试i:hover, a:hover（注意：悬停在 i 和 a 之后，中间没有空格）。如果这不起作用，那么您可能需要比导致背景颜色更具体的东西
font awesome 是字体基础，你不能改变背景。而是使用 svg 图标。
您能否像使用 font-awesome 4.7 一样为您当前的问题创建一个 minimal reproducible example，悬停时您不会获得任何背景：jsfiddle.net/qbnjsoc0

【解决方案1】：

我的猜测是，所有链接的某些样式规则都覆盖了这个。也许试试这个：

i:hover, a:hover {
    background: transparent!important; // or background-color
}

【讨论】：

【解决方案2】：

试试这个

a i{
  padding:10px;
  background:#fcf;
}
a:hover,i:hover{
  
  background:transparent;
  /* or */
  /* background:none;*/
}

<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<a href="/products/2/edit"><i class="fas fa-edit"></i></a>

【讨论】：

【解决方案3】：

这个问题解决了：

i:hover, a:hover {
    background: transparent!important; // or background-color
}

谢谢！

【讨论】：

我会尽量不使用!important - 它只能作为最后的手段使用 - 特别是当您将它应用于裸元素选择器时。如果你像这样使用它，它很可能会导致你进一步的问题
到目前为止我用的很重要！直到我没有得到其他解决方案或找到什么 css 让我在这个黑色背景下产生噪音
右键单击检查元素 - 查看导致背景的规则并覆盖它。如果你像这样使用重要，你将需要在其他规则上使用它来覆盖这个，然后你将到达一个地步，你的代码是一个无法维护的噩梦，试图从悬停的链接中删除背景颜色是不可能的（并且您的样式表会臃肿并降低您的页面速度）