Javascript 使用Tab键触发相同的悬停功能

当您按下键盘上的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');
                }
            );
        });

---

您可以使用“模糊”事件：

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

选项卡按钮不会生成

悬停

事件，它会生成

焦点

和

模糊

事件。要实现所需的功能，可以执行以下操作：

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非常陌生，我正在学习如何将不可访问的网站转换为可访问的网站。@JesseBrewer是的，

选项卡的键代码为
9
，但使用
keypress
事件很难做到这一点。正如我在回答中提到的，您可以使用
聚焦
和
模糊
事件。我的示例在元素被聚焦时不会触发悬停，但它执行相同的函数（
活动的
），应该具有相同的效果。@JBrew30太棒了。我很高兴能帮上忙。祝你好运