Javascript 更改悬停时活动引导按钮的类别

如果我想更改此引导按钮的类，请使用jQuery悬停，以便按钮的样式更改为新的自定义类，我想使用“addClass”添加该自定义类：

但是，如果我尝试在使用jQuery悬停时更改此“活动”引导按钮的类：

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

---

有人能告诉我这个类添加/删除的正确方向吗

看起来问题可能来自其他地方，可能您没有设置

！重要信息

在自定义css上

我试过的方法如下：

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

编辑： 在@jshthornton的注释之后，我对代码进行了编辑，使其更符合bootstrap的本机代码。以下是我所做的：

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

通过这种方式，您基本上是在利用现有的引导代码，而不是应用像

这样繁琐的解决方法！重要信息

，如有可能，最好避免使用

和带有js的

：

.btn-primary.active.sort-hover-active {
    background-color:red;
}

像这样使用它可能会不时被覆盖。如果是这种情况，只需找到权重最大的选择器路径。

没有js：

.btn-primary.active:hover {
    background-color:red;
}

如果您只需要在悬停时进行视觉更改，这是“最好”的方法。由于突变较少，这也是DOM强度最低的。使用此方法，您可以删除JS悬停代码。

---

这在一些遗留IEs中也存在问题。请在此处阅读更多信息：

尝试使用

toggleClass

方法和

hover

事件，检查以下示例：

$（文档）.ready（函数（）{
$（“#我的btn”）.hover（函数（）{
$（此）.toggleClass（“btn危险”）；
});
});

悬停时的类更改
什么东西不能使用它？你能详细说明一下吗？…因为它似乎对我很有效：是的。。。未将类“sort hover active”（带有“addClass”）添加到“”。它是，看，我正在为您演示，为类添加了背景色：在您的引导中。。。你能让按钮的蓝色背景在悬停时变为红色吗？不要鼓励那些仍在学习的人使用诸如！重要的是bootstrap你也经常忍受它的局限性，不管它有多棒，它只是不能涵盖所有可能的场景，所以有时候你必须解决它，我相信这是一个这样的场景…我非常不同意。除非你处理的是需要强制更改的打印样式表！重要的应该被彻底禁止。特别是如果你教的人可能不明白使用它的后果。@jshthornton dude，展示你的智慧并提供一个更好的答案，如果它带来结果，我会向它鞠躬，这是最终的目标。。。我确实使用
！重要信息
有时候，我是一个糟糕的编码员吗？也许吧，但我至少要传达，而不仅仅是批评……我对你提供答案没有问题——它是有效的。但你至少应该告知OP你的解决方案的注意事项；否则就是粗心。
$('#tile-sort').hover(
    function() {
        $('#sort-goodbye').removeClass('btn-primary').addClass('btn-danger');
    },
    function() {
        $('#sort-goodbye').removeClass('btn-danger').addClass('btn-primary');
    }
);

.btn-primary.active.sort-hover-active {
    background-color:red;
}

.btn-primary.active:hover {
    background-color:red;
}