-1

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

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

我怎么知道它是否有效?

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

有什么建议么?

编辑

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

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

我的 jQuery 版本是1.10

例如

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

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

:hover 伪选择器在sizzle 文档中,我不认为这很糟糕。

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

jQuery插件

在这里演示jsfiddle

我添加了一个:hovered表达式作为插件,你可以is(':hovered')直接使用。

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

4

1 回答 1

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') );
});
于 2013-07-31T22:08:19.963 回答