Question

我正在与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/

Answer 1

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

上

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

Example

_{我指的是两个类：.container .btn-click-me和.btn:hover, btn:focus同样具体}

Answer 2

如果您要查看悬停时和悬停时的转换，请在过度状态下添加转换：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 ;
}

Twitter Bootstrap按钮转换

2 个答案: