css - 为什么我的 SASS 渐变混入的悬停状态不起作用？

Question

我在我的 Rails 应用程序中的一些 anchors 上使用了以下 gradient 混合:

@mixin gradient($color) { 
  $from: lighten($color, 5%);
  $to: darken($color, 5%);
  background-color: $color;
  background-image: -moz-linear-gradient($from, $to);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
  background-image: -webkit-linear-gradient($from, $to);
  background-image: -o-linear-gradient($from, $to);
  &:hover {
    $hover_color: darken($color, 5%);
    $from: lighten($hover_color, 5%);
    $to: darken($hover_color, 5%);
    background-color: $hover_color;
    background-image: -moz-linear-gradient($from, $to);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
    background-image: -webkit-linear-gradient($from, $to);
    background-image: -o-linear-gradient($from, $to);
  }
}

虽然 :hover 不起作用。当我将鼠标悬停在 anchor 上时，没有任何变化。我希望在那里看到颜色的变化。

谁能告诉我我在这里缺少什么？

感谢您的帮助。

Answer 1

SASS 代码很好。

background-image 位于 background-color 的“顶部”，因此您看不到变化。

进行此调整，这将声明所有背景属性:

&:hover {
  background: darken($color, 20%) !important;
}

您或许可以删除 !important。

如果你想要不同的渐变，你必须在 :hover 样式中再次声明 each 属性(具有不同的值)。