마우스 오버 상태를 바인딩 해제했지만 다른 상태로 복원하는 방법은 무엇입니까?

Question

나는 무엇이 일어나고 싶은지이 무엇입니까

요소 위로 마우스를 가져 가면 캡션이 나타납니다. 쉽습니다.

하지만 요소를 클릭하고 해당 호버 상태를 유지하고 다른 요소는 여전히 호버링 효과를 유지하려고합니다.

두 번째 단계를 올바르게 수행 할 수 없습니다. 다른 요소를 클릭 한 후 마우스 오버 상태를 다시 추가하는 방법을 모르겠습니다. 여기

는 내가 지금까지 무엇을 가지고 : 나쁜 설명 죄송합니다 :

http://jsfiddle.net/62cRZ/1/

이

편집 감사합니다. 여기 내가 의미하는 바가 있습니다. 좋아요. image1과 image2가 있습니다. image1을 클릭하면 캡션이 사라지고 더 이상 페이드 아웃하지 않습니다. image2에 마우스를 가져 가면 캡션이 페이드 인 및 페이드 아웃됩니다.

이제 image2를 클릭하면 캡션이 사라지고 더 이상 페이딩되지 않습니다. 그러나 이미지 1의 페이딩 캡션은 원래 상태로 돌아오고 마우스를 가져갈 때 페이드 인/페이드 아웃됩니다.

Answer 1

대신 호버 작업을 바인딩 해제, 당신은 "활성"자막에 클래스를 추가 한 다음 호버 행동에 대해 확인할 수 있습니다 :

$('.pic').hover(function() { 
    var caption = $(".caption",this); 
    if (! caption.hasClass("active")) { 
     caption.stop().fadeIn(); 
    } 
}, 
function() { 
    var caption = $(".caption",this); 
    if (! caption.hasClass("active")) { 
     caption.stop().fadeOut(); 
    } 
}); 

$('.pic').click(function() { 
    //fade out all other captions that have kept their hover states/ This wasn't the first pic clicked on 
    $('.caption').fadeOut().removeClass("active"); 

    //fade in only this caption when clicked 
    $(".caption", this).fadeIn().addClass("active"); 

});​ 

예 : 당신은 유지 의미 http://jsfiddle.net/bstakes/62cRZ/9/