jQuery "hover state" - 测试元素是否不再悬停

Question

我知道你可以测试，如果一个元素被悬停在上面，使用：

$('.foo:hover').length > 0;

或者就我而言：

$(this).filter(':hover').length > 0;

如果元素触发 'mouseenter' 事件，则两者都将返回值 true。我多么想测试一个元素是否不再悬停。我尝试使用：

!($(this).filter(':hover').length > 0;)

以及

$(this).filter(':hover').length < 0;

但它并没有给我想要的结果。

使用上述代码的示例

上下文是我正在处理的下拉菜单。

Answer 1

为什么不听以下几点：

  $('.box').on('mouseleave', function() {
    console.log($(this).filter(':hover').length > 0);
  });

Answer 2

其他人已经提到了mouseleave; 这里有一个与罗伯特的答案非常相似的片段：

$('.box').on('mouseenter', function() {
  console.log($(this).filter(':hover').length > 0);
  $(this).on('mouseleave', function() {
    $(this).off('mouseleave');
    console.log('bye!');
  })
});

不同之处在于，它只关注所讨论的原始元素，一旦发射就会自杀。