在 bootstrap 4 中更改按钮转换的目标背景颜色

Question

我想更改鼠标悬停在按钮上时按钮的行为方式。默认情况下，将鼠标悬停在按钮上时，按钮的背景会变暗。我想通过修改 bootstrap 源中 _variables.scss 文件中的变量来改变这种行为。但我能找到的关于此事的唯一变数是：

$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;

但我无法弄清楚此转换指的是什么变量？我能以某种方式更改此过渡的目标背景颜色吗？

Answer 1

btn-transition 变量没有定义 background-color 的颜色。它定义了 CSS transition properties。这些是在过渡期间获得动画效果的属性。

您正在寻找 button-variant @mixin。查看 mixin 的参数：

button-variant(
  $background,
  $border,
  $hover-background: darken($background, 7.5%), 
  $hover-border: darken($border, 10%), 
  $active-background: darken($background, 10%), 
  $active-border: darken($border, 12.5%)
) { .. }

如您所见，$background 和 $border 是必需的参数。所有其他参数都是可选的。因此，您可以通过更改这些可选参数来重新定义按钮颜色。例如，这里我将 $hover-background 调暗 30%（覆盖默认的 7.5% 调暗）...

@each $color, $value in $theme-colors{
  .btn-#{$color} {
    @include button-variant($value, $value, darken($value,30%), darken($value,10%), darken($value,10%), darken($value,12.5%));
  }
}

演示：https://www.codeply.com/go/ybbHC4JUZN

您可以根据需要更改参数。

在 bootstrap 4 中更改按钮转换的目标背景颜色

Change target background color of transition of buttons in bootstrap 4

sass

hover

css-transitions

twitter-bootstrap

bootstrap-4