는 부트 스트랩 설정

Question

내에서 호버에 jQuery를 사용하여 특정 클래스를 제거 I 다음 부트 스트랩 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(){ 
 
    \t $('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/

,

참고 : - 당신의 제거 (removeClass()에서 사용) '.text-muted'에서 . 경우

귀하의 코드도 작동합니다.

확인이 -

Answer 2

document.ready 함수 내에 코드를 휘게하십시오.

<script> 
    $(document).ready(function(e) { 
     $('.card').hover(function(e){ 
     $(this).find('h5').removeClass('text-muted'); 
     }, function(e) { 
     $(this).find('h5').addClass('text-muted'); 
     }); 
    }); 
</script> 

Answer 3

https://jsfiddle.net/fc89fmys/ 때, 포함하지 않는 removeClass 기능을 사용하여 '.'. 그래야합니다

$(document).ready(function() { 
    $('.card').hover(function() { 
     $(this).find('h5').removeClass('text-muted'); 
    }); 
}) 

마우스가 떠날 때 클래스를 다시 추가하려면이 코드를 시도하십시오.

$(document).ready(function() { 
    $('.card').hover(function() { 
     $(this).find('h5').removeClass('text-muted'); 
    }); 

    $('.card').mouseenter(function() { 
     $(this).find('h5').removeClass('text-muted'); 
    }); 

    $('.card').mouseleave(function() { 
     $(this).find('h5').addClass('text-muted'); 
    }); 
}) 

당신은 https://codepen.io/anon/pen/ZXqjrK