2

我与 Twitter Bootstrap 发生了相当烦人的冲突。

当我将鼠标悬停在按钮上时，CSS 过渡仅在悬停时播放。

这是我的CSS：

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}

.btn-click-me {
    color: white !important;
    background: black !important;
    -webkit-transition: background linear 350ms;
}

.btn-click-me:hover {
    background: white !important;
}

可以在这里看到一个有效的 JFiddle 演示：如此处所示：http: //jsfiddle.net/MgcDU/3805/

4

2 回答 2

2

这是一个特殊性问题bootstrap.css- 默认情况下，所有按钮都有一个转换 - 您需要做的就是.container在选择器中包含该类，您将覆盖引导程序并查看两种状态的预期转换。您也可以通过转到3246bootstrap.css 行来修改默认转换，转换在.btn:hover, .btn:focus类上

在这种情况下，两个类覆盖两个类的原因是因为在使用@import条件规则时，导入的 CSS 优先于您在 jsFiddle 中编写的CSS。如果两个选择器具有相同的特异性，则样式表中声明的最新选择器将获胜

例子

我指的是两个类：.container .btn-click-me它们.btn:hover, btn:focus同样具体

于 2013-05-02T21:54:18.630 回答
0

如果您想查看悬停时和悬停时的过渡，即使在过度状态下也要添加过渡：http: //jsfiddle.net/MgcDU/3821/

CSS

    @import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}

.btn-click-me {
    color: white;
     -webkit-transition: background linear 350ms;
    background: black;

}

.btn-click-me:hover {
 -webkit-transition: background linear 350ms;
    background: white ;
}
于 2013-05-02T22:03:46.257 回答