jQuery 오버레이 호버 깜박임 문제

Question

img을 올리면 오버레이가 나타납니다. 괜찮아,하지만 계속 반짝 거든. 나는 여기서 둘러 보았고, 사람들은 똑같은 문제를 가진 것처럼 보인다. 그러나 해결책은 가치가 하락한 .toggle()을 포함합니다.

$(".box img").mouseenter(function(){ 
     $(this).next(".overlay").fadeIn(300); 
    }).mouseleave(function(){ 
     $(this).next(".overlay").fadeOut(300); 
}); 

여기는 Fiddle입니다.

Answer 1

.overlay div가 페이드 인하면 마우스 커서와 기본 img 요소 사이에 들어가서 .mouseleave 기능을 트리거하기 때문입니다. 이

이 문제를 해결하는 방법은 여러 가지가있을 수 있지만 여기에 하나 :

이 .overlay 클래스에 opacity: 0를 추가합니다. 그런 다음 JS에서 이것을 사용

$(".box .overlay").mouseenter(function(){ 
    $(this).animate({opacity: 1}, 300) 
}).mouseleave(function(){ 
    $(this).animate({opacity: 0}, 300) 
}); 

그리고 (업데이트)를 fiddle link합니다.