javascript - 悬停时更改事件 Bootstrap 按钮的类

Question

如果我想用 jQuery 在悬停时更改这个 Bootstrap 按钮的类，以便按钮的样式更改为新的自定义类，我想用“addClass”添加:

<div id="tile-sort" class="btn-group" data-toggle="buttons">
    <label id="sort-hello" class="btn btn-primary btn-xs">
        <input type="radio" name="sort-option" value="hello">Hello
    </label>
</div>

下面的代码有效:

$('#tile-sort').hover(
    function() {
        $('.btn-primary').addClass('sort-hover-nonactive');
    },
    function() {
        $('.btn-primary').removeClass('sort-hover-nonactive');
    }
);

但是，如果我尝试使用 jQuery 在悬停时更改此“事件” Bootstrap 按钮的类:

<div id="tile-sort" class="btn-group" data-toggle="buttons">
    <label id="sort-goodbye" class="btn btn-primary btn-xs active">
        <input type="radio" name="sort-option" value="goodbye">Goodbye
    </label>
</div>

下面的代码不工作:

$('#tile-sort').hover(
    function() {
        $('.btn-primary.active').addClass('sort-hover-active');
    },
    function() {
        $('.btn-primary.active').removeClass('sort-hover-active');
    }
);

有人可以为我指明添加/删除此类的正确方向吗？

Answer 1

看起来问题可能来自其他地方，也许您没有在自定义 css 上设置 !important？

我试过如下:

.sort-hover-active {
    background-color:red !important;
}

Here is a demo

编辑:

根据@jshthornton 的评论，我对代码进行了编辑，使其更符合 Bootstrap 的 native 代码。这是我所做的:

$('#tile-sort').hover(
    function() {
        $('#sort-goodbye').removeClass('btn-primary').addClass('btn-danger');
    },
    function() {
        $('#sort-goodbye').removeClass('btn-danger').addClass('btn-primary');
    }
);

通过这种方式，您基本上是在使用现有的 Bootstrap 代码，而不是应用像 !important 这样繁琐的变通方法，如果可能的话，最好避免这种变通方法。

和 here is a demo of that