我有以下 Bootstrap 4 卡:
<div class="card">
<div class="card-body">
<img src="img/person3.jpg" alt="" class="img-fluid rounded-circle w-50 mb-3">
<h3>John Doe</h3>
<h5 class="text-muted">Editor</h5>
<p class="">Lorem ipsum dolor, sit amet consectetur adipisicing</p>
etc...
代码的其余部分是无关紧要的,所有代码都按预期工作。但是,我想做到这一点,以便每当我将鼠标悬停在卡片上时,'text-muted'
类就会从单独的 h5
后代中删除。我以为我的 jQuery 已关闭,所以我尝试了以下操作:
<script>
$('.card').hover(function(){
$(this).find('h5').removeClass('.text-muted');
});
</script>
但是,这似乎对我没有任何作用,我不明白为什么。这应该找到悬停卡片的下一个 h5
后代,并从中删除相应的 text-muted
类。在 h5
之前有一个 img
和一个 h3
同级,这与此有什么关系吗?
我怎样才能在这里实现我的目标?
最佳答案
你必须像下面这样做:-
$(document).ready(function(){
$('.card').hover(function(){
$('h5', this).removeClass('text-muted');
}, function(e) {
$('h5', this).addClass('text-muted');
});
});
工作示例:-
$(document).ready(function(){
$('.card').hover(function(){
$('h5', this).removeClass('text-muted');
}, function(e) {
$('h5', this).addClass('text-muted');
});
});
.text-muted{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
<div class="card-body">
<img src="img/person3.jpg" alt="" class="img-fluid rounded-circle w-50 mb-3">
<h3>John Doe</h3>
<h5 class="text-muted">Editor</h5>
<p class="">Lorem ipsum dolor, sit amet consectetur adipisicing</p>
</div>
</div>
工作 jsFiddle 链接:- https://jsfiddle.net/zuakca4r/
注意:-
如果您从 '.text-muted'
中删除 .
(在 removeClass()
中使用),您的代码也将正常工作。
关于jquery - 在 Bootstrap 设置中悬停时使用 jQuery 删除某个类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46763051/