使用 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

您可以使用 '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');
            }
        );
    });

Answer 2

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 键触发相同的 .hover 功能

Use Tab Key to fire same .hover function

javascript

keyboard

jquery

keypress