Question

我在我的Rails应用程序中的某些gradient上使用了以下anchors mixin：

@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坐在顶部＆＃34; background-color的{{1}}，所以你没有看到变化。

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

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

您可以删除!important。

如果您想拥有不同的渐变，则必须在:hover样式中再次声明每个属性（具有不同的值）。

Answer 2

我建议使用透明渐变，只需更改背景颜色。此外，您还要重新定义$from和$to个变量，而不是接受$color参数。

@mixin gradient($color) { 
  $from: transparent;
  $to: darken($color, 5%);

  background-color: lighten($color, 5%);
  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 {
    background-color: red;
  }
}

为什么我的SASS梯度混合的悬停状态不起作用？

2 个答案: