html - 悬停不同的元素时更改元素的颜色

Question

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

当悬停在服务框上时，文本和 fa-icon/font awesome 图标都会在悬停时改变颜色。我的文字可以正常工作，但无法与图标一起使用。

如果有人可以就我为此需要使用的 CSS 代码提供一点帮助，那将是一个很大的帮助。

下面是我用于文本的当前代码...只是无法让 fa-icon 使用它。

    .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;
}

Answer 1

看起来伪元素(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 也是如此。