Tab 키를 사용하여 동일한 .hover 기능을 실행하십시오.

Question

키보드의 Tab 버튼을 눌렀을 때 동일한 .hover 기능 (아래 참조)을 실행하고 싶습니다. 당신은 '흐림'이벤트를 사용할 수 있습니다

$('.staffContainer .item').hover(
       function() { 
        $(this).find('.staff-layer').fadeIn("fast"); 
        $(this).find('.work-description').fadeIn("fast"); 
        $(this).find('img').addClass('transition'); 
       }, 
       function() { 
        $(this).find('.staff-layer').fadeOut("fast"); 
        $(this).find('.work-description').fadeOut("fast"); 
        $(this).find('img').removeClass('transition'); 
       } 
      ); 
     }); 

Answer 1

가 탭 버튼이 hover 이벤트를 생성하지 않습니다, 그것은 focus 및 blur 이벤트를 생성합니다. 원하는 기능을 수행하려면 다음과 같이 할 수 있습니다.

function active() { 
    $(this).find('.staff-layer, .work-description').fadeIn("fast"); 
    $(this).find('img').addClass('transition'); 
} 
function inactive() { 
    $(this).find('.staff-layer, .work-description').fadeOut("fast"); 
    $(this).find('img').removeClass('transition'); 
} 
$('.staffContainer .item').hover(active, inactive).focus(active).blur(inactive); 

Answer 2

:

$('.staffContainer .item').bind('blur', 
      function() { 
       $(this).find('.staff-layer').fadeIn("fast"); 
       $(this).find('.work-description').fadeIn("fast"); 
       $(this).find('img').addClass('transition'); 
      }, 
      function() { 
       $(this).find('.staff-layer').fadeOut("fast"); 
       $(this).find('.work-description').fadeOut("fast"); 
       $(this).find('img').removeClass('transition'); 
      } 
     ); 
    });