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

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)

在回答问题时,这个答案是最好的解决方案.使用.hover()jQuery 1.9.x中的方法删除删除了这个':hover'选择器.

有趣的是,"allicarn"最近的回答显示,:hover当你用选择器作为前缀时,它可以用作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版本中测试它,只需在本答案开头打开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

在悬停时设置标志：

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

然后只需检查您的标志。

Answer 5

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

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

function isHovered(selector) {

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

}