图标链接上没有背景色

问题描述

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

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

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

如何删除黑色背景？

我已经尝试过了，但是什么也没发生：

i,a :hover{
    background: none;
}

解决方法

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

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

,

尝试一下

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>

,

此问题已解决：

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

谢谢！