1

我正在处理 BootStrap 页面，并尝试修改基本按钮颜色的 CSS，以及悬停时的颜色变化。

按钮上有轻微的渐变效果。当用户将鼠标悬停在按钮上时，我希望它稍微改变颜色（同时保持渐变）以指示悬停状态。

我使用的渐变是基于背景颜色的。浏览器的后备支持让我的生活更轻松。

这是一个 JSFiddle，显示了我在做什么：http: //jsfiddle.net/toddhd/5JybP/

.btn-inverse {
  background-color: #67e667;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-repeat: repeat-x;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  color: #ffffff;
  -webkit-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.btn-inverse:hover,
.btn-inverse:focus,
.btn-inverse:active,
.btn-inverse.active,
.btn-inverse.disabled,
.btn-inverse[disabled] {
  background-color: #5ee55e;
}

问题是，虽然按钮看起来很漂亮，但悬停效果似乎坏了。它没有显示一个漂亮的渐变，而是有点“从底部滑入”并且只显示两个水平的颜色条。

在这个例子中，我只是改变了背景颜色，但我也尝试重新声明每一个 CSS 属性，就像初始类一样。出现同样的问题。

我究竟做错了什么？

4

1 回答 1

2

如果要覆盖引导类，请使用 id。最好保持引导程序引导程序，以确保一切正常工作（考虑布局、模式窗口等），并且您在演示中看到的就是您所得到的。现在你正在用你自己的类覆盖引导程序。

您的问题是 bootstrap 声明了background-position: 0 -15px您的代码未考虑的 a 。这可以通过包含来覆盖background-position: 0。我将其更改background-color为红色以更清楚地表明它正在工作，请务必将其更改回来。:)

这是小提琴：http: //jsfiddle.net/5JybP/8/

这是代码：

HTML

<a href="#" id="btn-inverse" data-toggle="dropdown" class="btn btn-inverse btn-small dropdown-toggle">
    Logged in as Todd<span class="caret"></span>
</a>

CSS

#btn-inverse {
  background-color: #67e667;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-repeat: repeat-x;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  color: #ffffff;
  -webkit-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

#btn-inverse:hover,
#btn-inverse:focus,
#btn-inverse:active,
#btn-inverse.active,
#btn-inverse.disabled,
#btn-inverse[disabled] {
  background-color: red;
  background-position: 0;
}

约书亚

于 2013-11-04T17:53:20.543 回答