twitter-bootstrap 悬停时更改活动引导程序按钮的类别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23940734/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change class of active bootstrap button on hover
提问by Berklie
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":
如果我想在使用 jQuery 悬停时更改此引导程序按钮的类，以便按钮的样式更改为新的自定义类，我想添加“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:
但是，如果我尝试在使用 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 notwork:
下面的代码不起作用：
$('#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?
有人可以指出我添加/删除此类的正确方向吗？
回答by webeno
Looks like the issue might be coming from somewhere else, maybe you didn't set !importanton your custom css?
看起来问题可能来自其他地方，也许您没有设置!important自定义 css？
I've tried it as follows:
我试过如下：
.sort-hover-active {
background-color:red !important;
}
EDITED:
编辑：
Following the comments of @jshthornton, I edited the code to be more in line with bootstrap's native code. Here is what I did:
按照@jshthornton 的评论，我编辑了代码以更符合引导程序的本机代码。这是我所做的：
$('#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 !importantwhich should preferably be avoided, if possible.
通过这种方式，您基本上是在使用现有的引导程序代码，而不是应用麻烦的解决方法!important，如果可能的话，最好避免这种方法。
回答by jshthornton
With js:
使用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.com/specifics-on-css-specificity/
像这样使用它可能会不时被覆盖。如果是这种情况，只需找到具有最强权重的选择器路径。 http://css-tricks.com/specifics-on-css-specificity/
Without js:
没有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?
如果您只需要在悬停时进行视觉更改，这是执行此操作的“最佳”方法。由于较少的突变，这也是对 DOM 最少的。使用此方法，您可以删除 JS 悬停代码。这在一些旧版 IE 中也存在问题。在这里阅读更多：css：每个类都支持 :hover 状态吗？
回答by fitorec
Try with toggleClassmethod and hoverevent, check this example:
尝试使用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>If you want to change the text or reuse this logic
, you can create a plugin check this example(toggleBtn plugin):
如果你想改变文本或重用这个逻辑，你可以创建一个插件检查这个例子（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>Good Luck!.
祝你好运！。
