使用 Tab 键触发相同的 .hover 功能答案

【问题标题】：Use Tab Key to fire same .hover function使用 Tab 键触发相同的 .hover 功能
【发布时间】：2018-03-21 02:49:38
【问题描述】：

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

【问题讨论】：

标签： javascript jquery keyboard keypress

【解决方案1】：

Tab 按钮不会生成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 很陌生，我正在学习如何将不可访问的网站转换为可访问的。
@JesseBrewer 是的，Tab 的密钥代码为9，但使用keypressevents 很难做到这一点。正如我在回答中提到的，您可以使用 focus 和 blur 事件。我的示例在元素获得焦点时不会触发悬停，但它会执行相同的功能 (active)，应该具有相同的效果。
@JBrew30 太好了。我很高兴能帮上忙。祝你好运。

【解决方案2】：

你可以使用'blur'事件：

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

【讨论】：