使用 jQuery 检测 IF 悬停在元素上

IT技术 javascript jquery
2021-01-29 05:25:04

我不是在寻找一个行动调用的时候徘徊,而是要告诉的方式,如果一个元素正在上空盘旋目前。例如:

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

是否有实现此目的的 jQuery 方法?

6个回答

原始(和正确)答案:

您可以使用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' 选择器随着.hover()jQuery 1.9.x 中方法删除而被删除。

有趣的是,“allicarn”最近的一个回答表明,:hover当您使用 selector 前缀时,可以将其用作 CSS 选择器(与 Sizzle 相比)$($(this).selector + ":hover").length > 0,并且它似乎有效!

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

编辑 2(2013 年 9 月 21 日): .is(":hover") 作品

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

  1. 它适用于 jQuery 1.7.x。

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

  3. 它在 jQuery 1.10.1 和 2.0.2(可能是 2.0.x)中再次起作用,这表明 1.9.x 中的失败是一个错误,而不是我们在前一点中认为的有意行为。

如果您想在特定的 jQuery 版本中对此进行测试,只需打开本答案开头的 JSFiddle 示例,更改为所需的 jQuery 版本并单击“运行”。如果悬停时颜色发生变化,则它起作用。

.

编辑 3(2014 年 3 月 9 日):仅当 jQuery 序列包含单个元素时才有效

正如@Wilmer 在评论中所示,他有一个小提琴,它甚至不适用于我和其他人在这里测试的 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 Tips & Resources Newsletter 中引用

抛出在IE 8的错误:Syntax Error, unrecognized expression: hover. jquery-1.7.js line 4179
2021-03-17 05:25:04
效果很好,很简单。谢谢穆罕默德!
2021-03-25 05:25:04
此外,如果您使用的是 jQuery mobile,那也将它搞砸了 - 检查 gideons 答案中的小提琴并打开 jQuery Mobile 1.4.4 框,然后您会看到它不起作用......我可以确认它与1.4.2 也:(
2021-04-04 05:25:04
@Meligy:我已经分叉了你的小提琴来说明它不适用于选择中的多个项目:jsfiddle.net/p34n8
2021-04-05 05:25:04
这是真的。刚刚测试了一下。对于 IE6,尝试这里描述的这个 hack peterned.home.xs4all.nl/csshover.html或者回退到正常悬停添加一些状态并在以后清除它的解决方案。
2021-04-09 05:25:04

利用:

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

jQuery 1.9+

奇迹般有效!:)
2021-03-17 05:25:04
这非常有效。在浏览替换 .hover 功能和 :hover 选择器时找到的最佳解决方案。谢谢!
2021-04-06 05:25:04

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

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

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

接受的答案在 JQuery 2.x 上对我不起作用, .is(":hover")每次调用都返回 false。

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

function isHovered(selector) {

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

}

在悬停时设置标志:

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

然后只需检查您的标志。

在我的特定情况下似乎不起作用,但我同意这是一个很好的方式。就我而言,当我有mouseleave一个元素时,我想检查鼠标是否进入了另一个特定元素。
2021-03-21 05:25:04
简单,但不容易重用。:/
2021-03-25 05:25:04
您可以更新它以使用涵盖所有适用元素的选择器,并使用 将标志存储在各个元素上.data()
2021-04-05 05:25:04
@Trevor - true - 您需要将状态存储在元素上,然后创建一个函数来检查元素的(大概是数据标签)状态。
2021-04-06 05:25:04
@JamesSkidmore - 在 mouseleave 事件中,您可以使用e.fromElementand e.toElement这对你有用吗?
2021-04-07 05:25:04