Question

我希望仅在另一个div悬停且空格键已关闭时显示一个div。我尝试使用事件的keyCode和which属性，但没有一个工作。虽然，我可以创建一个按下CTRL键而不是空格键的示例，你也可以看到here。

我应该如何更改代码，以便它可以与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。

在mouseenter上绑定一个 .keydown() ，然后在mouseleave上 .unbind() ：

$(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 example

一个重要的注意事项是，即使窗口没有聚焦， .hover() 也能正常工作，但 .keydown() 只有在窗口是焦点。

Answer 2

在悬停时我会设置一个标志，然后在离开悬停状态时我会重置标志。然后当按下空格键时，您可以检查是否处于悬停状态。

我不确定悬停和空间是否会以你想要的方式被困。

修改

在jquery中你可以将event.which和event.hover组合在同一个元素上，也许你可以链接它们。

我会快速看一下，但我不喜欢你的机会。

编辑2

问题是div不会获得任何关键事件。我认为你需要将一个关键的监听器附加到文档上并悬停在div上并保留一个标志。

你可以链接像$('#myElement").bind('hover keydown', function(){});
这样的事件

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

2 个答案:

的 jsFiddle example