Question

我正在使用bootstrap进行简单的测试webapp。我想要一个按钮以标准样式（btn）开始，并仅在悬停时切换到btn-danger样式。我知道这可以用jquery或直接的javascript完成，但我真的对这种方法不感兴趣。

我可以直接用CSS 执行此操作，而无需将任何引导样式代码复制到我自己的CSS中吗？理想情况下，我希望能够做到这样的事情：

.mybutton {

}

.mybutton:hover {
  style: btn-danger;
}

http://jsfiddle.net/wPDCm/5/

Answer 1

使用LESS（Twitter Bootstrap使用的CSS预处理器）的语法应为：

.mybutton:hover {
    @include .btn-danger;
}

单独使用CSS无法做到这一点。

Answer 2

如果没有CSS预处理器，就无法做到这一点。

使用SASS您可以执行以下操作：

@mixin danger-will-robinson {
  background-color: red;
}

.btn-danger {
  @include danger-will-robinson;
}

.mybutton:hover {
  @include danger-will-robinson;
}

其他CSS预处理器具有类似的功能。

仅在CSS中悬停时更改按钮类

2 个答案: