jquery - 在 Bootstrap 设置中悬停时使用 jQuery 删除某个类

Question

我有以下 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 同级，这与此有什么关系吗？

我怎样才能在这里实现我的目标？

Answer 1

你必须像下面这样做:-

$(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() 中使用)，您的代码也将正常工作。

检查这个:- https://jsfiddle.net/fc89fmys/