如果我想使用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');
}
);
有人能指出我这个班级添加/删除的正确方向吗?
答案 0 :(得分:1)
看起来问题可能来自其他地方,也许您没有在自定义CSS上设置!important
?
我尝试过如下:
.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');
}
);
通过这种方式,您基本上可以使用现有的引导代码,而不是应用!important
等繁琐的解决方法,如果可能的话,最好避免使用这些解决方法。
答案 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>
祝你好运!。