jQuery - 关于is(':hover')

时间:2013-07-31 21:58:59

标签: javascript jquery jquery-plugins

is(':hover')非常有用,但有时它不起作用。

在谷歌浏览器中,我打开一个图像页面(我正在编写一个chrome扩展名,内容脚本涉及jquery),这不起作用,但在正常的网页中它可以。

我如何知道它是否有效?

我应该通过保存$.fn.is来扩展此功能,并处理所有mouseinmouseout事件吗?

有什么建议吗?

修改

看起来adeneo的答案很好,但它不起作用。

关于yckart的answer,我想有时节点不会得到mouseleave事件,所以这会打破悬停状态,这里需要一个条件。

我的jQuery版本是1.10

e.g。

我使用标签输入,当我在输入区域中移动时将显示标签选择器(div显示标签列表),当我移出输入区域时将隐藏标签选择器。所以当我离开输入区域时,我必须检查选择器区域中的鼠标(添加延迟)?如果是,则不会隐藏选择器。当我离开选择器时,我必须检查输入区域中的鼠标(添加延迟)?如果没有,请隐藏选择器。

添加一个延迟以确保鼠标进入另一个区域并且我不能将选择器放在输入区域(如果我可以,所以我不必检查鼠标离开或输入两个区域),作为子节点

:悬停伪选择器位于sizzle documention,我不认为这很糟糕。

要保留我的代码,我想我应该添加$.expr[':'].hover

jQuery插件

在这里演示jsfiddle

我添加:hovered表达式作为插件,您可以直接使用is(':hovered')

第一次会返回false,您也可以在使用trackHover之前致电is(':hovered')

1 个答案:

答案 0 :(得分:1)

最好的方法应该是这样的:

// add a class if you hover an element
$('*').on('mouseenter mouseleave', function () {
    $(this).toggleClass('hover');
});

// later check for the 'hover'-class
// instead of $('node').is(':hover');
$('node').is('.hover');

<强>更新

我使用matchesSelector创建了一个简单的表达式过滤器:

(function ($) {
    // https://gist.github.com/jonathantneal/3062955
    var html = document.documentElement;
    var matches = html.matchesSelector || html.oMatchesSelector || html.msMatchesSelector || html.mozMatchesSelector || html.webkitMatchesSelector || function (selector) {
        var nodes = (this.parentNode || this.document).querySelectorAll(selector), i = -1;
        while (nodes[++i] && nodes[i] != this);
        return !nodes[i];
    };

    $.expr.filters.hover = function (elem) {
        return matches.call(elem, ':hover');
    };
}(jQuery));

$('div').hover(function () {
    console.log( $(this).is(':hover') );
});