If I want to change the class of this bootstrap button on hover with jQuery, so that the styling of the button changes to the new custom class, that I would like to add with "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>

The below code works:

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

However, if I attempt to change the class of this "active" bootstrap button on hover with 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>

The below code does not work:

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

Can someone point me in the correct direction for this class adding/removing to happen?

If I want to change the class of this bootstrap button on hover with jQuery, so that the styling of the button changes to the new custom class, that I would like to add with "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>

The below code works:

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

However, if I attempt to change the class of this "active" bootstrap button on hover with 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>

The below code does not work:

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

Can someone point me in the correct direction for this class adding/removing to happen?

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow edited Jul 8, 2014 at 8:27 jgillich 76.5k77 gold badges6060 silver badges8888 bronze badges asked May 29, 2014 at 18:47 BerklieBerklie 59044 gold badges99 silver badges2424 bronze badges 8

• what is it that's not working with it? could you pls elaborate on that? – benomatis Commented May 29, 2014 at 18:49
• 1 ...because it appears to be working perfectly for me: bootply./46QrDSeAc2 – benomatis Commented May 29, 2014 at 18:50
• Yes... the class 'sort-hover-active' is not being added (with "addClass") to"<label id="sort-goodbye" class="btn btn-primary btn-xs active">". – Berklie Commented May 29, 2014 at 18:51
• it is, look, I'm demonstrating it for you, added a background color to the class: bootply./kTz8GBQ7Ct – benomatis Commented May 29, 2014 at 18:53
• In your bootply... can you make it so that the blue background of the button changes to red on hover? – Berklie Commented May 29, 2014 at 18:53

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 2

Looks like the issue might be ing from somewhere else, maybe you didn't set !important on your custom css?

I've tried it as follows:

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

Here is a demo

EDITED:

Following the ments of @jshthornton, I edited the code to be more in line with bootstrap's native code. Here is what I did:

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

This way you're basically making use of existing bootstrap code instead of applying cumbersome workarounds like !important which should preferably be avoided, if possible.

And here is a demo of that

With js:

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

Using it like this may be overwritten time to time. If this is the case just find the selector path which has the strongest weight. http://css-tricks./specifics-on-css-specificity/

Without js:

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

This is the "best" way to do it if you only need visual changes on hover. This is also the least intensive to the DOM due to less mutations. With this method you can remove your JS hover code. This also has issues in some legacy IEs. Read more here: css: does every class support :hover state?

Try with toggleClass method and hover event, check this example:

$(document).ready(function(){

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

});

<!-- libs -->
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0/css/bootstrap.min.css">

<!-- button -->
<a class='btn btn-primary' id='my-btn'>
   class change on hover
</a>

If you want to change the text or reuse this logic , you can create a plugin check this example(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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0/css/bootstrap.min.css">


<a id='my-btn' href='#'></a>
<a id='my-btn-2' href='#'></a>

Good Luck!.