Twitter引导程序，按钮悬停样式？答案

【问题标题】：Twitter bootstrap, buttons hover style?Twitter引导程序，按钮悬停样式？
【发布时间】：2012-09-12 03:30:50
【问题描述】：

我正在尝试为我的按钮使用渐变样式，但是，我遇到了悬停样式的问题，这是悬停前的按钮：

这是悬停之后：

这是按钮的haml：

= link_to '#', {:class=>'tour_btn btn btn-large btn-primary', :style=>'margin-left: 10px; width: 105px;'} do
        %h3
          Take a Tour

少：

.tour_btn {
    #gradient > .vertical(#F98C51, #a35b35);
}

有什么想法吗？是否可以为悬停状态指定另一种渐变样式？或者至少，悬停时不要更改按钮？

【问题讨论】：

标签： html css twitter-bootstrap less

【解决方案1】：

Twitter Bootstrap 在悬停时为 background-position 设置动画效果（因为背景渐变不能有过渡）。在您的情况下发生的情况是，背景渐变随着background-position: -15px 向上移动，您会看到下面的背景颜色。

要解决此问题，请将您的 background-color 设置为悬停时按钮渐变的底部颜色：

.tour_btn {
    #gradient > .vertical(#F98C51, #a35b35);
    &:hover { background-color: #a35b35 }
}

【讨论】：

发生这种情况的原因是什么？是不是背景颜色是由另一个冲突的主题定义的？

【解决方案2】：

如果您为按钮设置了背景图片，则背景会在悬停时上移@987654321@。您可以将其设置为0px。

.tour_btn:hover {
   background-position: 0px !important;
}

【讨论】：

这是什么，我什至不知道。
这对我有用。我并不是说 Kostia 的回答是错误的，但我并不理解。

【解决方案3】：

当使用自定义 CSS 而不是 LESS 来设置按钮样式时，请尝试 http://twitterbootstrapbuttons.w3masters.nl/?color=%23F1874E。您将获得自定义按钮的所有 CSS，包括悬停效果和禁用/活动状态。

对于上面的按钮，您可以使用可能：

.btn-custom-lighten.active {
  color: rgba(255, 255, 255, 0.75);
}
.btn-custom-lighten {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #f29461;
  background-image: -moz-linear-gradient(top, #f1874e, #f5a77d);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f1874e), to(#f5a77d));
  background-image: -webkit-linear-gradient(top, #f1874e, #f5a77d);
  background-image: -o-linear-gradient(top, #f1874e, #f5a77d);
  background-image: linear-gradient(to bottom, #f1874e, #f5a77d);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff1874e', endColorstr='#fff5a77d', GradientType=0);
  border-color: #f5a77d #f5a77d #ef7736;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #f5a77d;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */

  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-custom-lighten:hover,
.btn-custom-lighten:focus,
.btn-custom-lighten:active,
.btn-custom-lighten.active,
.btn-custom-lighten.disabled,
.btn-custom-lighten[disabled] {
  color: #ffffff;
  background-color: #f5a77d;
  *background-color: #f39766;
}
.btn-custom-lighten:active,
.btn-custom-lighten.active {
  background-color: #f1874e ;
}

用法：

<button class="btn btn-custom-lighten btn-large">Your button</button>

在您的 bootstrap(.min).css 之后添加 CSS 使用这个 css 可以让您在大多数浏览器中自定义按钮效果。

【讨论】：

仅按钮生成器工具的链接就值得一票。感谢您的精彩指针！

【解决方案4】：

当按钮悬停时，您可以使用 css :hover 属性指定您想要的 CSS。

所以在你的情况下，你会想要做类似的事情

.tour_btn:hover {
    /* your custom css */
}

使用 chrome 开发人员工具，您应该能够看到引导程序当前正在应用哪种渐变，然后用您的 css 覆盖它们。

【讨论】：

+1 用于阐明如何使用 :hover，如何准备好回答 Kostia :-)

【解决方案5】：

.tour_btn:hover {
     background-color: #a35b35;
     background-position: 30px 30px;
}

我找到了这个解决方案，你可以试试这个。它适用于简单的代码

【讨论】：