Question

我正在使用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属性。出现同样的问题。

我做错了什么？

Answer 1

如果要覆盖bootstrap类，请使用id。最好保留引导程序引导程序，以确保一切正常（想想布局，模态窗口等），你在演示中看到的就是你得到的东西。现在你用你自己的班级覆盖引导程序。

您的问题是，引导程序声明代码未考虑background-position: 0 -15px。包括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;
}

约书亚

CSS Gradient（悬停）无法正常工作

1 个答案:

HTML

CSS