Bootstrap Button Hover 继承类答案

【问题标题】：Boostrap Button Hover Inherit ClassBootstrap Button Hover 继承类
【发布时间】：2015-04-25 06:24:42
【问题描述】：

简而言之，我有一个.btn-info 按钮，当我将鼠标悬停在它上面时，我想将类更改为.btn-danger。显然，当我不再悬停时，我希望默认类为.btn-info。如何使用 CSS 实现这一点？

【问题讨论】：

单独的 CSS 不能改变类。你要么需要 Javascript 来做到这一点，要么有一个特殊的 CSS 类，当你不在按钮上方时看起来像 .btn-info，当悬停在它上面时看起来像 .btn-danger。
你不能。也许你可以用 CSS 来模仿它，但解决方案是 JS。
@cello，让它“看起来像”.btn-danger 的最简单方法是什么？
@Confiqure Alexis 的回答如下 :)

标签： html css twitter-bootstrap class inheritance

【解决方案1】：

你不能用 css 改变一个节点的类，但你可以做这样的事情默认：

.btn-info{
 border:1px solid green;
}

悬停：

.btn-info:hover{
 border:2px solid red;
}

【讨论】：

【解决方案2】：

使用 :hover 选择器。刚刚测试了下面的方法，似乎可以正常工作

<a href="#" class="btn btn-info">Button</a>


.btn-info:hover {
 color: #fff;
 background-color: #d9534f;
 border-color: #d43f3a;
}

我直接从 btn-danger 类中获取了悬停样式。

【讨论】：

我猜没有办法自动从.btn-danger继承？
@Confiqure 有像LESS 这样的工具，可以让您在更高的抽象级别上编写 CSS，这将使您能够做到这一点，但恐怕没有直接的方法。

【解决方案3】：

这个 jQuery 代码会做你想做的事，只要给你一个按钮 .my-btn。

$('.my-btn').on({
  mouseenter: function() {
    $(this).removeClass('btn-info').addClass('btn-danger');
  },
  mouseleave: function() {
    $(this).addClass('btn-info').removeClass('btn-danger');
  }
});

codepen

【讨论】：

我喜欢这种方法，但这似乎对我不起作用？我把它放在最后的<head> 中。我做错了什么？
把它放在<script> 标签中并在你的按钮上添加my-btn 类，它应该可以工作了。
@Confiqure 再试一次，类名中有额外的点，我的错，不过 codepen 可以工作。