Question

我不是在寻找悬停时调用的操作，而是一种告诉当前正在悬停元素的方法。例如：

$('#elem').mouseIsOver(); // returns true or false

是否有一个jQuery方法可以实现这个目标？

Answer 1

原创（并且正确）答案：

您可以使用is()并检查选择器:hover。

var isHovered = $('#elem').is(":hover"); // returns true or false

示例：http://jsfiddle.net/Meligy/2kyaJ/3/

（仅当选择器最多匹配一个元素时才有效。有关详细信息，请参阅编辑3）

编辑1（2013年6月29日）：（仅适用于jQuery 1.9.x，因为它适用于1.10+，请参阅下一页编辑2）

这个答案是回答问题时的最佳解决方案。在jQuery 1.9.x中删除了.hover()方法删除了这个'：hover'选择器。

有趣的是，“allicarn”最近的回答显示，当你用选择器:hover作为前缀时，可以使用$($(this).selector + ":hover").length > 0作为CSS选择器（与Sizzle对比），它似乎有效！

此外，另一个答案中提到的hoverIntent插件看起来也很不错。

编辑2（2013年9月21日）： .is(":hover") 有效

基于另一条评论，我注意到我发布的原始方式.is(":hover")实际上仍然适用于jQuery，所以。

它适用于jQuery 1.7.x。
当有人向我报告时，它在1.9.1中停止工作，我们都认为这与jQuery删除该版本中事件处理的hover别名有关。
< / LI>
它在jQuery 1.10.1和2.0.2（也许是2.0.x）中再次起作用，这表明1.9.x中的失败是一个错误或者不是我们在前一点中所想的故意行为

如果您想在特定的jQuery版本中测试它，只需在本答案开头打开JSFidlle示例，切换到所需的jQuery版本，然后单击“运行”。如果悬停时颜色发生变化，则可以正常工作。

编辑3（2014年3月9日）：仅当jQuery序列包含单个元素时才有效

如@Wilmer在评论中所示，他有一个小提琴甚至不能对抗jQuery版本我和其他人在这里测试它。当我试图找到他的案件有什么特别之处时，我注意到他一次试图检查多个元素。这是投掷Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: hover。

所以，与他的小提琴一起工作，这确实不工作：

var isHovered = !!$('#up, #down').filter(":hover").length;

虽然 DOES 工作：

var isHovered = !!$('#up,#down').
                    filter(function() { return $(this).is(":hover"); }).length;

它也适用于包含单个元素的jQuery序列，例如原始选择器只匹配一个元素，或者您在结果上调用.first()等。

我的JavaScript + Web Dev Tips & Resources Newsletter也提到了这一点。

Answer 2

使用：

var hovered = $("#parent").find("#element:hover").length;

jQuery 1.9 +

Answer 3

它在jQuery 1.9中不起作用。根据user2444818的回答制作了这个插件。

jQuery.fn.mouseIsOver = function () {
    return $(this).parent().find($(this).selector + ":hover").length > 0;
};

http://jsfiddle.net/Wp2v4/1/

Answer 4

在处理此主题一段时间之后，要添加要添加的更新：

.is（“：hover”）的所有解决方案都在jQuery 1.9.1
检查鼠标是否仍然在元素上的最可能的原因是尝试防止事件相互触发。例如，在我们的mouseenter事件完成之前，我们遇到了触发和完成mouseleave的问题。当然这是因为鼠标快速移动。

我们使用hoverIntent https://github.com/briancherne/jquery-hoverIntent为我们解决问题。基本上，如果鼠标移动更加慎重，它会触发。（有一点需要注意的是，它会触发鼠标输入一个元素并离开 - 如果你只想使用一个传递构造函数一个空函数）

Answer 5

您可以从所有悬停元素中过滤元素。有问题的代码：

element.filter(':hover')

保存代码：

jQuery(':hover').filter(element)

返回布尔值：

jQuery(':hover').filter(element).length===0

Answer 6

在悬停时设置标志：

var over = false;
$('#elem').hover(function() {
  over = true;
},
function () {
  over = false;
});

然后检查你的旗帜。

Answer 7

扩大@Mohamed的答案。您可以使用一点封装

像这样：

jQuery.fn.mouseIsOver = function () {
    if($(this[0]).is(":hover"))
    {
        return true;
    }
    return false;
};

使用它像：

$("#elem").mouseIsOver();//returns true or false

分叉小提琴： http://jsfiddle.net/cgWdF/1/

Answer 8

在JQuery 2.x上，我接受的答案对我没有用 .is(":hover")每次通话都会返回false。

我最终找到了一个非常简单的解决方案：

function isHovered(selector) {

    return $(selector+":hover").length > 0

}

Answer 9

我喜欢第一个回复，但对我来说这很奇怪。当试图在鼠标的页面加载后检查时，我必须至少延迟500毫秒的延迟才能工作：

$(window).on('load', function() {
    setTimeout(function() {
        $('img:hover').fadeOut().fadeIn();
    }, 500);
});

http://codepen.io/molokoloco/pen/Grvkx/

Answer 10

根据kinakuta的答案设置一个标志似乎是合理的，你可以在身体上放置一个监听器，这样你就可以检查是否有任何元素在特定的瞬间悬停。

但是，您想如何处理子节点？您或许应该检查元素是否是当前悬停元素的祖先。

<script>

var isOver = (function() {
  var overElement;
  return {

    // Set the "over" element
    set: function(e) {
      overElement = e.target || e.srcElement;
    },

    // Return the current "over" element
    get: function() {
      return overElement;    
    },

    // Check if element is the current "over" element
    check: function(element) {
      return element == overElement;
    },

    // Check if element is, or an ancestor of, the 
    // current "over" element
    checkAll: function(element) {
      while (overElement.parentNode) {
         if (element == overElement) return true;
         overElement = overElement.parentNode;
      }
      return false;
    }
  };
}());


// Check every second if p0 is being hovered over
window.setInterval( function() {
  var el = document.getElementById('p0');
  document.getElementById('msg').innerHTML = isOver.checkAll(el);
}, 1000);


</script>

<body onmouseover="isOver.set(event);">
  <div>Here is a div
    <p id="p0">Here is a p in the div<span> here is a span in the p</span> foo bar </p>
  </div>
  <div id="msg"></div>
</body>

Answer 11

https://api.jquery.com/hover/

第38行中的异步功能：

$( ".class#id" ).hover(function() {
  Your javascript
});

使用jQuery检测是否将鼠标悬停在元素上

11 个答案:

编辑3（2014年3月9日）：仅当jQuery序列包含单个元素时才有效