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

时间:2014-05-29 18:47:02

标签: javascript jquery html css twitter-bootstrap

如果我想使用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');
    }
);

有人能指出我这个班级添加/删除的正确方向吗?

3 个答案:

答案 0 :(得分: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

答案 1 :(得分:1)

使用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?

答案 2 :(得分:0)

尝试使用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>

祝你好运!。