如何确定密钥是否在悬停时关闭？

Question

我想展示一个div只有当另一个人div徘徊而空间栏落下时.我试图使用keyCode和which事件的属性,但没有一个工作.虽然,我可以创建一个按下CTRL键而不是空格键的示例,你也可以在这里看到.

我应该如何更改代码,以便它可以与Space Bar(或任何其他键)一起使用？

HTML:

<div class='a'></div>
<div class='b'></div>

CSS:

body {
    position: relative;
}
div {
    width: 100px;
    height: 100px;
    position: absolute;
}
.a {
    background: #777;
    left: 50px;
    top: 30px;
}
.b {
    display: none;
    background: #000;
    left: 250px;
    top: 100px;
}

JS:

$(function() {
    $('div').hover(function(e) {
        if (e.ctrlKey) {
            $('.b').show();
        }
    }, function() {
        if ($('.b').is(':visible')) $('.b').hide();
    });
});

Answer 1

您可以利用.hover()绑定2个处理程序的事实.一个用于mouseenter,一个用于mouseleave.

绑定一个.keydown()鼠标中心,只需.unbind()在mouseleave 上绑定:

$(function() {

      // Define the mouseenter and mouseleave handlers with hover
    $("div.a").hover(function() {

          // Show other div if a key is pressed.
          // You can of course check for on particular key.
        $(document).keydown(function() {
            $("div.b").show();
        });

    }, function() {

         // unbind the keydown handler on mouseleave
       $(document).unbind("keydown");

       $("div.b").hide();
    });
});?

jsFiddle例子

一个重要的注意事项是.hover()即使窗口没有被聚焦.keydown()也会起作用,但只有在窗口聚焦时才会起作用.