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'); 
      } 
     ); 
    });