使用Tab键激发相同的.hover功能

问题描述：

我想在按下键盘上的Tab键时触发相同的.hover功能（如下所示）。使用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'); 
       } 
      ); 
     });

答

的标签按钮不会产生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);

我明白一个标签按钮不会产生悬停。我只是想在用户按下Tab键时发生同样的效果。我认为= 9我认为。抱歉，我对Javascript和jquery很陌生，我正在学习如何将非可访问站点转换为可访问。 – JBrew30

@JesseBrewer是的，'Tab'键码是'9'，但使用'keypress'事件很难做到这一点。正如我在我的回答中所提到的，您可以使用“焦点”和“模糊”事件。我的例子没有触发悬停当一个元素被聚焦，但它执行相同的功能（'活动'），应该有相同的效果。 – Titus

@ JBrew30太棒了。我很高兴能够提供帮助。祝你好运。 – Titus

答

您可以使用 '模糊' 事件：

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

使用Tab键激发相同的.hover功能

相关推荐