Bootstrap 按钮悬停继承 Class

Question

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

Answer 1

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

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

悬停：

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

Answer 2

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

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


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

我从 btn-danger class.

中直接采用了悬停样式

Answer 3

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

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

codepen

Bootstrap 按钮悬停继承 Class

Boostrap Button Hover Inherit Class

html

css

inheritance

class

twitter-bootstrap