Twitter Bootstrap中的所有按钮都悬停样式

Twitter Bootstrap中的所有按钮都悬停样式

问题描述:

我想更改悬停按钮的默认样式(Bootstrap v3.2)。默认情况下,它变得更暗。假设我想减轻重量。

I would like to change default styling for hover buttons (Bootstrap v3.2). By default it's becoming darker. Let's assume I would like to make it lighter.

我看着按钮的变量较少,但是我没有看到按钮悬停样式选项。

I looked at Buttons Less variables but I don't see button hover styling option.

在SASS中,我可以这样做:

In SASS I can do:

@import "packages/stylesheets/bootstrap/bootstrap";

.btn {
  &:hover {
    background: yellow;
  }
}

,但是它将所有按钮背景更改为定义的颜色(在这种情况下为黄色)。

but it changes all button background to defined color (in this case yellow).

是否可以对所有按钮进行操作?

Is it possible to do it for all buttons?

我找到的唯一解决方案是id可以为每种类型的按钮做到这一点,但是我希望可以为所有按钮做些简单的事情:

The only solution I found id to do it this for each type of button this way but I hope it can be done for all buttons a bit simpler:

@import "packages/stylesheets/bootstrap/bootstrap";

.btn-primary {
  &:hover {
    background: lighten($btn-primary-bg, 5%);
  }
}
.btn-success {
  &:hover {
    background: lighten($btn-success-bg, 5%);
  }
}


我发现的解决方案不是很好(您需要修改引导文件),但是它可以工作。

The solution I found is not very elegant (you need to modify bootstrap file) but it works.

您需要转到 mixins / _buttons.scss 文件,然后更改:

You need to go to mixins/_buttons.scss file and then change:

background-color: darken($background, 10%);

进入

background-color: lighten($background, 10%);

它应该完成所有按钮的工作。

It should do the job for all buttons.