使用jQuery检测是否将鼠标悬停在元素上 [英] Detect IF hovering over element with jQuery

问题描述

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

I'm not looking for an action to call when hovering, but instead a way to tell if an element is being hovered over currently. For instance:

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

是否有jQuery方法可以实现此目的？

Is there a jQuery method that accomplishes this?

推荐答案

原创（和正确）答案：

你可以使用是（）并检查选择器：hover 。

You can use is() and check for the selector :hover.

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

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

（这只适用于当选择器最多匹配一个元素时。请参阅编辑3以获取更多信息。

(This only works when the selector matches ONE element max. See Edit 3 for more)

。

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

Edit 1 (June 29, 2013): (Applicable to jQuery 1.9.x only, as it works with 1.10+, see next Edit 2)

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

This answer was the best solution at the time the question was answered. This ':hover' selector was removed with the .hover() method removal in jQuery 1.9.x.

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

Interestingly a recent answer by "allicarn" shows it's possible to use :hover as CSS selector (vs. Sizzle) when you prefix it with a selector $($(this).selector + ":hover").length > 0, and it seems to work!

此外， hoverIntent 插件看起来也很不错。

Also, hoverIntent plugin mentioned in a another answer looks very nice as well.

编辑2（9月2013年第21期）： .is（：悬停） 有效

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

Based on another comment I have noticed that the original way I posted, .is(":hover"), actually still works in jQuery, so.

1. 它适用于jQuery 1.7.x。

1. It worked in jQuery 1.7.x.

它停止了在1.9.1工作时，当有人向我报告时，我们都认为这与jQuery删除该版本中事件处理的 hover 别名有关。

It stopped working in 1.9.1, when someone reported it to me, and we all thought it was related to jQuery removing the hover alias for event handling in that version.

它在jQuery 1.10.1和2.0.2（可能是2.0.x）中再次起作用，这表明1.9.x中的失败是一个错误或者不是故意的我们在前一点思考过的行为。

It worked again in jQuery 1.10.1 and 2.0.2 (maybe 2.0.x), which suggests that the failure in 1.9.x was a bug or so not an intentional behaviour as we thought in the previous point.

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

If you want to test this in q particular jQuery version, just open the JSFidlle example at the beginning of this answer, change to the desired jQuery version and click "Run". If the colour changes on hover, it works.

。

如@Wilmer在评论中所示，他有一个小提琴甚至不能对抗jQuery版本我和其他人在这里测试了它。当我试图找到他的案件有什么特别之处时，我注意到他一次试图检查多个元素。这是抛出未捕获错误：语法错误，无法识别的表达式：unsupported伪：悬停。

As shown by @Wilmer in the comments, he has a fiddle which doesn't even work against jQuery versions I and others here tested it against. When I tried to find what's special about his case I noticed that he was trying to check multiple elements at a time. This was throwing Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: hover.

所以，与他一起工作小提琴， NOT 工作：

So, working with his fiddle, this does NOT work:

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

当 DOES 工作时：

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

它也适用于包含单个元素的jQuery序列，就像原始选择器只匹配一个元素一样，或者如果你在结果上调用 .first（）等。

It also works with jQuery sequences that contain a single element, like if the original selector matched only one element, or if you called .first() on the results, etc.

这也在我的< a href =http://gurustop.net =noreferrer> JavaScript + Web Dev Tips&资源通讯。

这篇关于使用jQuery检测是否将鼠标悬停在元素上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！