Question

如果我想使用jQuery在悬停时更改此引导按钮的类，以便按钮的样式更改为新的自定义类，我想添加＆＃34; addClass＆＃34;：< / p>

<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');
    }
);

但是，如果我试图改变这个＆＃34;活跃＆＃34;用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

EDITED：

根据@jshthornton的评论，我编辑的代码更符合bootstrap的本机代码。这是我做的：

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

通过这种方式，您基本上可以使用现有的引导代码，而不是应用!important等繁琐的解决方法，如果可能的话，最好避免使用这些解决方法。

here is a demo of that

Answer 2

使用js：

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

这样使用它可能会不时被覆盖。如果是这种情况，只需找到权重最大的选择器路径。 http://css-tricks.com/specifics-on-css-specificity/

没有js：

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

这是最好的＆＃34;如果你只需要悬停时的视觉变化，那么这样做的方法。由于突变较少，这对DOM也是最不密集的。使用此方法，您可以删除JS悬停代码。这在一些传统IE中也存在问题。在此处阅读更多内容：css: does every class support :hover state?

Answer 3

尝试使用toggleClass方法和hover事件，请检查以下示例：

$(document).ready(function(){

  $("#my-btn").hover(function(){
      $(this).toggleClass("btn-danger");
  });

});

<!-- libs -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<!-- button -->
<a class='btn btn-primary' id='my-btn'>
   class change on hover
</a>

如果要更改文本或重复使用此逻辑，您可以创建一个插件检查此示例（toggleBtn plugin）：

// pluglin toogleBtn
jQuery.fn.extend({
    toggleBtn: function (normalBtnOps, hoverBtnOps) {
        var self = this;
        self.attr('class', 'btn ' + normalBtnOps.class);
        self.text(normalBtnOps.text);
        this.hover(function () {
           self
           .attr('class', 'btn ' + hoverBtnOps.class)
           .text(hoverBtnOps.text);
        }, function(){
            self
           .attr('class', 'btn ' + normalBtnOps.class)
           .text(normalBtnOps.text);
        });
    }
});



// test Plugin
$('#my-btn').toggleBtn(
  {'class': 'btn-primary','text' : 'normal btn'},
  {'class': 'btn-danger','text' : 'hover btn'}
 );
 
 $('#my-btn-2').toggleBtn(
  {'class': 'btn-warning','text' : 'warning!'},
  {'class': 'btn-dark','text' : 'Dark!'}
 );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">


<a id='my-btn' href='#'></a>
<a id='my-btn-2' href='#'></a>

祝你好运！。

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

3 个答案:

EDITED：