Twitter Bootstrap中的所有按钮都悬停样式 [英] All buttons hover styling in 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.

这篇关于Twitter Bootstrap中的所有按钮都悬停样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！