CSS渐变链接文本在悬停时跳转

时间:2019-02-16 22:13:25

标签: css hover gradient

我在悬停时为链接使用渐变文本颜色,但是自从我添加css类以来,就发生了奇怪的跳转效果。每当我将链接悬停时,链接就会像2px-4px一样跳跃。

当我删除渐变颜色类别时,一切又恢复正常了。有没有解决办法?我添加的自定义代码:

.bg-gradient-ligth {
  background-color: $white;
  background-image: linear-gradient(315deg, $white 0%, $ligth-grey 74%);
}

a {
  color:$green
}

a:hover {
  background: -webkit-linear-gradient($gradient1, $gradient2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.heading-gradient {
  background: -webkit-linear-gradient($gradient1, $gradient2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

其余的只是普通的Bootstrap和主题CSS。以前工作正常。顺便说一句,它还在底部切断了渐变h1标题的文本。

0 个答案:

没有答案