Bootstrap Button Hover继承类

Question

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

Answer 1

这个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

Answer 2

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

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

悬停：

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

Answer 3

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

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


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

我直接从btn-danger类中采用了悬停风格。