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

Question

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

156

我不是在寻找一个当鼠标悬停时要调用的动作，而是想知道当前是否有元素被悬停。例如：

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

有没有一种jQuery方法可以实现这个？

- James Skidmore

以防有人正在寻找其他解决方案 https://dev59.com/2XM_5IYBdhLWcg3wrFMt - Jo E.

1

标记为重复似乎很不合适。问题并没有说明意图，让别人读懂提问者的想法并决定这是一个碰撞检测问题并将其标记为重复。 - Meligy

12个回答

35

使用：

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

jQuery 1.9+

- user2444818

1

这个非常出色。在寻找替代.hover函数和:hover选择器的过程中找到的最佳解决方案。谢谢！ - Tyler

1

非常好用！ :) - jroi_web

9

这个插件在 jQuery 1.9 中无法使用。基于 user2444818 的答案制作了这个插件。

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

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

- allicarn

6

对于 JQuery 2.x 版本，被接受的答案对我不起作用。每次调用.is(":hover")都返回false。

最终，我采用了一种相当简单的解决方案：

function isHovered(selector) {

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

}

- gidim

5

鼠标悬停时设定一个标志：

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

那么只需要检查您的标记即可。

- kinakuta

简单，但不易重用。:/ - Trevor

在我的特定情况下似乎不起作用，但我同意否则这是一个好方法。在我的情况下，当我“mouseleave”一个元素时，我想检查鼠标是否进入了另一个特定的元素。 - James Skidmore

@JamesSkidmore - 在mouseleave事件中，你可以使用e.fromElement和e.toElement。这对你有用吗？ - mrtsherman

你可以更新代码，使用适用于所有相关元素的选择器，并使用“ .data()”在各个元素上存储标志。 - nnnnnn

@Trevor - 没错 - 你需要在元素上存储状态，然后创建一个函数来检查（假设是数据标签）元素的状态。 - kinakuta

4

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

element.filter(':hover')

保存代码：

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

返回布尔值：

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

- Mino

4

在研究这个主题一段时间后，需要增加一些更新:

所有使用.is(":hover")的解决方案都在jQuery 1.9.1上失效。
检查鼠标是否仍停留在元素上的最可能原因是试图防止事件互相触发。例如，我们遇到了鼠标离开事件被触发并完成，而鼠标进入事件甚至还没有完成。当然，这是由于鼠标移动速度过快造成的。

我们使用了hoverIntent https://github.com/briancherne/jquery-hoverIntent 来解决这个问题。本质上，它会在鼠标移动更有意义时触发。(需要注意的是，它将触发鼠标进入元素和鼠标离开元素 - 如果您只想使用一个，请向构造函数传递一个空函数)

- Donald A Nummer Jr

3

扩展 @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/

- gideon

6

为了做到这一点，你可以这样做：jQuery.fn.mouseIsOver = function() { return this[0].matches(':hover'); }; - Lathan

33

判断鼠标是否悬停在$('#elem')上是多么困难。 - luckykrrish

不是难度的问题，而更多是意图清晰地表达。但每个人都有自己的选择。 - gideon

1

我喜欢第一个回答，但对我来说有些奇怪。在尝试在页面加载后立即检查鼠标时，我必须至少延迟500毫秒才能使其起作用：

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

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

- molokoloco

1

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

第38行中的异步函数：

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

- Leon

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Meligy · Accepted Answer

您可以使用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）

这个答案是在回答问题时最好的解决方案。这个“：hover”选择器已在jQuery 1.9.x中使用.hover() 方法删除。

有趣的是，“ allicarn”的一个最新答案显示，当您使用选择器$（$（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别名有关。
它在jQuery 1.10.1和2.0.2（也许是2.0.x）中再次工作，这表明在1.9.x中的故障是一个错误或不是我们在前一个观点中认为的意图行为。

如果您想在特定的jQuery版本中测试此内容，请打开此答案开头的JSFidlle示例，切换到所需的jQuery版本，然后单击“运行”。如果颜色在悬停时更改，它就有效果。

.

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

正如@ Wilmer在评论中显示的那样，他有一个fiddle甚至不能针对我和其他人在这里测试过的jQuery版本工作。当我尝试找出他的情况有什么特别之处时，我注意到他正在尝试一次检查多个元素。这会抛出 Uncaught Error：Syntax error，unrecognized expression：unsupported pseudo：hover 。

因此，与他的小提琴一起工作，这不起作用：

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

虽然这个确实有效：

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

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

这也可在我的JavaScript + Web Dev技巧和资源通讯中找到参考信息。