Question

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

当将鼠标悬停在服务框上时，文本和fa-icon / font awesome图标都会在悬停时更改颜色。我有文字工作，但也无法使用图标。

如果有人可以给我们一点帮助，我需要使用CSS代码，这将是一个很大的帮助。

下面是我用于文本的当前代码...只是无法使用fa图标。

    .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

您将包括悬停在一起并显示活动或不显示service-nav-tab的所有代码。

试试这个：

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

.service-nav-tab li a:hover {
    background: linear-gradient(OTHER SET HERE);
    }

Answer 2

伪元素（ FontAwesome ＆＃39;插入图标的方式，例如：.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，突破文档流也会导致相同的问题。

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

2 个答案: