Html : 링크에서 미리보기를 표시하는 방법?

Question

저는 디자이너가 아니므로 이것에 문제가 있습니다. mouseover에서 FancyBox를 사용하여 미리보기 이미지를 표시하고 사용자가 클릭하여 링크 된 파일을 다운로드하려고 할 때 링크가 있습니다. 문제는 다운로드가 실행되지 않는 동안 마우스 오버가 항상 갇혀 있다는 것입니다.

$(".my_link").hover(function() { 
      $.fancybox(
        '<img src=bla bla>', 
        { 
          'autoDimensions'  : false, 
          'width'       : 350, 
          'height'      : 'auto', 
          'transitionIn'   : 'none', 
          'transitionOut'   : 'none' 
        } 
      ); 
    }); 

를 해결하는 방법이 있나요 : 여기

코드인가?

Answer 1

마우스 오버와 마우스 아웃 동작 모두에 해당하는 것을 실행한다는 의미에서 한 가지 기능 만 사용할 수 있습니다. 상자를 닫으려면 mouseout 함수로 무언가를 할 수 있는지 알 수 있습니까?

편집 : 내 의견을 아래에서 시도해 볼 수 있습니다. Fancybox를 닫기위한 명령은 $ .fancybox.close()입니다. 원하는 경우 자신의 코드에 적용 할 수도 있습니다. 내가 그 라인에서 한 것처럼 두 번째 기능을 마우스로 가리 키기 만하면됩니다.

Fancybox의 사용과 관련하여 필자는 직접 사용하지 않았지만 기능을 올바르게 사용했다고 확신하지는 않습니다. < img src = "blah blah"> 요소를 첫 번째 인수로 전달하지만 jQuery이므로 "# my-img"와 같은 선택기를 사용해야한다고 생각합니다. 틀 렸으면 고쳐줘.

$(".my_link").hover(function(){ 
    $(this).fancybox(...); 
}, function(){ 
    $.fancybox.close(); 
});