jquery - 鼠标悬停触发按键事件

Question

我有以下 html

 <div class="divcontainer" id="divcontainer1" data-element="1">
   <div class="innerdivcontainer hidden" id="innerdivcontainer1"></div>
 </div>
 <div class="divcontainer" id="divcontainer2" data-element="2">
   <div class="innerdivcontainer hidden" id="innerdivcontainer2"></div>
 </div>
 <div class="divcontainer" id="divcontainer3" data-element="3">
   <div class="innerdivcontainer hidden" id="innerdivcontainer3"></div>
 </div>

我想要一个当鼠标悬停在 div 容器上并且用户开始在键盘上打字时触发的函数。仅当用户将鼠标悬停在 divcontainer 上并开始键入时，该函数才会将类 insidedivcontainer 更改为不隐藏。我想使用 .on 因为我已经将新元素加载到 dom 中，它也应该可以工作

我正在思考这些问题

 //check for mouse over event
   $('.divcontainer').on({
        mouseenter: function () {
     var data-element = $(this).attr('data-element').
               //check if user begins to type something with if statement
                   if(//code goes here){
                       $('innerdivcontainer'+data-element).show();

                     }

        }
   });

我不知道用什么来检查键盘上的击键

Answer 1

我不知道这是否真的是您要找的，但这里有 jsFiddle 。我发现结果很酷，但可能不太用户友好。考虑向您的 div 添加悬停样式，以向您的用户解释如何使用您的评论部分。

关于我的实现，有几件事需要注意:

首先，在 HTML 标记中使用 tabindex 能够触发 div 上的按键。 (参见this post)。除此之外，标记与您的相同。
使用 focus 和 blur 触发右侧 div(鼠标悬停的那个)上的按键事件。
mouseleave 用于在您离开 div 时清除按键处理程序，因此当您将鼠标悬停在另一个 div 上时，注释部分不会出现)

$('.divcontainer').mouseenter(function () {
    var data_element = $(this).attr('data-element');
    $(this).focus();
    $(this).on("keypress", function() {
        $('#innerdivcontainer' + data_element).show();
    });
}).mouseleave(function(){
    $(this).blur();
    $(this).on("keypress", function(){});
});

请告诉我这是否对您有任何帮助。