html - 悬停其他元素时更改元素的颜色

我试图在此页面上实现-我们服务部分首页上的http://derbyshiregas.co.uk/。

将鼠标悬停在服务框上时，文本和fa / icon / font真棒图标都会在悬停时更改颜色。我已经使文本正常工作，但也无法与图标一起工作。

如果有人可以在CSS代码方面给我们一些帮助，那将是一个很大的帮助。

以下是我正在为文本使用的当前代码...只是无法使用该图标。

    .service-nav-tab li a:hover, .service-nav-tab li.active a {
  background: linear-gradient(132deg, #e31372, #12a9c1, #5086bb, #6a10b4, #d49c10);
    background-size: 400% 400%;
      animation: BackgroundGradient 40s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

最佳答案

伪元素（FontAwesome的插入图标的方式，例如：.fa .fa-fire:before）似乎并不维护您应用于a标记的背景色。

尝试将background和-webkit-background-clip属性添加到伪元素本身-在开发工具中与CSS一起使用时已为我修复了此问题。

.service-nav-tab li a:hover .fa:before {
  background: linear-gradient(132deg, #e31372, #12a9c1, #5086bb, #6a10b4, #d49c10);
  background-size: 400% 400%;
  animation: BackgroundGradient 40s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip
}

编辑：我没有解释为什么它可以解决，或者为什么它首先失败。但是，我对某些属性进行了一些修改，发现即使对于包含主文本的h4，打破文档流也会导致相同的问题。