引导 btn 类，但不是悬停状态答案

【问题标题】：Bootstrap btn class, but not hover state引导 btn 类，但不是悬停状态
【发布时间】：2014-02-19 12:37:00
【问题描述】：

我知道引导程序中有 .btn 类

<span class="btn" style="background-color: #82CFFD"><strong>R</strong></span>

它有很好的样式，但反应像按钮、悬停状态等。是否有像 .btn 这样的引导类但没有悬停状态，或者我们必须做到:(

【问题讨论】：

为什么要在 css 文件中禁用/注释掉悬停状态或让 css 覆盖它

标签： html css twitter-bootstrap

【解决方案1】：

试试这个：

<a href="#" class="btn" role="button"><strong>R</strong></a>

您必须从引导程序中覆盖 .btn 类

.btn:hover {
  background-color : 'your background color';
}

对于光标有一个例子：

http://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&preval=default

【讨论】：

我不想像href那样做出反应，只是没有悬停状态和光标指针没有:)
有一个例子给你：w3schools.com/cssref/…

【解决方案2】：

我认为最简单的做法是将一些 .nohover 类添加到所需的 .btn 元素中，这些元素与 .btn 类具有相同的样式

HTML

<span class="btn nohover" style="background-color: #82CFFD"><strong>R</strong></span>

CSS

.btn.nohover:hover {
    /* here copy default .btn class styles */
    cursor:default !important;
    /* or something like that */
}

【讨论】：

【解决方案3】：

如果您使用属性style 设置样式，那么这将置顶所有从css 文件为类.btn 设置的样式。所以你不会得到在 bootstrap css 中定义的悬停状态样式。

从 boostrap 3 开始，您必须设置一个 css 基类 btn 和一个修饰符类 btn-default 或 btn-primary 或 ...

【讨论】：

【解决方案4】：

.btn:hover {
  color: @grayDark;
  text-decoration: none;
  background-color: darken(@white, 10%);
  background-position: 0 -15px;

  // transition is only when going to hover, otherwise the background
  // behind the gradient (there for IE<=9 fallback) gets mismatched
  .transition(background-position .1s linear);
}

你可以像这样使用悬停，

如果您想了解引导程序及其功能，请参阅此链接，

http://jacobrask.github.io/styledocco/styledocco/examples/bootstrap/docs/buttons.html

【讨论】：

【解决方案5】：

实现你想要的方法是设置你的button style，类似于btn-default，然后添加active class：

<span class="btn btn-default active" style="background-color: #82CFFD"><strong>R</strong></span>

唯一需要注意的是按钮看起来总是“按下”。如果您不希望按钮看起来被按下，则必须进行自定义覆盖。

【讨论】：

代替 active 尝试 hover 代替

【解决方案6】：

如果您使用的是 sass ( .scss )，您可以简单地覆盖样式。不过，我建议您将其包装在另一个独特的 div 中，这样您就不会无意中影响所有 .btn 类以供将来使用。

.btn {
  &:hover {
    background-color: #FFF;
  }
}

【讨论】：

【解决方案7】：

我知道这是一个老问题，但有一种简单的方法可以仅在引导程序中实现。

<span class="btn btn-default bg-light text-dark border border-secondary"><strong>R</strong></span>

您可以将border-secondary更改为其他颜色：border-primary、border-success等。

所以你也可以对 bg-light 这样做。

文本颜色使用：text-white、text-dark 或其他引导文本颜色。

如果您想使用与引导程序不同的背景颜色，请使用：style="background-color: #82CFFD"

<span class="btn btn-default border border-secondary" style="background-color: #82CFFD"><strong>R</strong></span>

【讨论】：