이 이미지 캡션 Jquery에 대한 클릭 기능에서 mouseenter 기능을 어떻게 변경합니까?

Question

이것은 이미지의 이미지 캡션을 나타 내기 위해 이전에 사용한 코드입니다. 그것은 마우스가있는 장치에 잘 작동하지만 마우스를 사용하지 않는 사용자도 사용할 수 있도록 코드를 조금 업데이트하고 싶습니다. 여기에 코드가 있습니다.

$(function() { 
    $(".thumb").mouseenter(function() { 
     var $t = $(this); 
     var $d = $("<div>"); 
     $d.addClass("desc").text($t.attr("alt")).css({ 
      width: $t.width(), 
      height: $t.height() - 20, 
      top: $t.position().top 
     }); 
     $t.after($d).fadeTo("fast", 0.3); 
     $d.mouseleave(function() { 
      $(this).fadeOut("fast", 0, function() { 
       $(this).remove(); 
      }).siblings("img.thumb").fadeTo("fast", 1.0); 
     }); 
    }); 
}); 

는 기본적으로, 나는 mouseenter /하는 MouseLeave 기능을 변경하고 페이지의 링크에 할당 클릭 기능을 교환하고 싶습니다. 또한이 클릭 기능을 사용하여 이미지와 관련된 캡션을 표시하고 링크의 두 번째 클릭시 캡션을 숨길 수 있습니다. 나는 그들을 밖으로 스와핑 시도했지만 원하는 결과를 성공적으로 실행할 수 없습니다. 나는 JS에 조금 익숙하다. 그리고이 코드가 내 의도대로 작동하도록 내가 생각할 수있는 유일한 방법이었다. 어떤 제안?

Answer 1

Working Demo

$(function() { 
    $(".thumb").click(function() { //replaced to click 
     var $t = $(this); 
     $d = $("<div>"); 
     $d.addClass("desc").text($t.attr("alt")).css({ 
      width: $t.width(), 
      height: $t.height() - 20, 
      top: $t.position().top 
     }); 
     //added caption toggle 
     $t.after($d).fadeTo("fast", 0.3); 
     $d.click(function() { //replaced to click 
      $(this).fadeOut("fast", 0, function() { 
       $(this).remove(); 
      }).siblings("img.thumb").fadeTo("fast", 1.0); 
     }); 
    }); 

});