jQuery为什么:只悬停一次工作?

时间:2013-02-26 01:22:32

标签: javascript jquery css hover mouseevent

我一直在使用以下代码段来确定Chrome / Safari&如果用户将鼠标悬停在锚点上,则为FF。

var isURL = $("a", obj).is(":hover");

我看过不同的帖子:hover是一个CSS选择器,但我无法理解的是为什么代码返回 true 如果obj中有1个链接但是抛出< em> javascript无法识别的表达式悬停错误,如果有2个或更多。

这是一个小提琴:悬停工作: - http://jsfiddle.net/2kyaJ/122/

相同但多个元素(不工作): - http://jsfiddle.net/2kyaJ/121/

任何人都可以向我解释这个吗?

顺便说一下,我已经看到了...... How do I check if the mouse is over an element in jQuery?

4年后这仍然是确定用户是否悬停在某个元素上的最佳且看似唯一方式吗?如果是,那么任何人都能提供一个例子吗?

编辑:不得不去钓鱼,我确实需要它,但事实证明这很简单,因为它的效果非常好。

我目前正在使用jQuery 1.9.1的插件中使用它,其中我在父元素(obj)的鼠标悬停上触发动画。希望其他人在将来发现它有用。使用.length而不是.size作为.size从1.8版开始不推荐使用。

        function isMouseOver() {
            if ($('a:hover', obj).length != 0) {
                return true;
            } else {
                return false;
            }                           
        }

用法:

var isURL = isMouseOver();

4 个答案:

答案 0 :(得分:5)

http://api.jquery.com/未记录

:hover - 因此我不相信它以任何特定方式工作。问题似乎是,当在集合中有多个元素要迭代时,Sizzle会被这个伪选择器弄糊涂,虽然我不能通过查看代码来告诉乳清。

它甚至在您的第一个示例中工作的事实似乎是一个错误:http://jsfiddle.net/2kyaJ/122/ - 它不适用于jQuery 1.9

至于如何判断一个元素是否悬停 - 我不确定你需要做什么情况。相反,最好在触发悬停时采取行动。您可以使用mouseovermouseenter绑定到“类似悬停”的事件。当然,还有CSS伪选择器:hover

答案 1 :(得分:3)

试试这个小提琴http://jsfiddle.net/2rU4U/

setInterval(function(){
    var $sample = $(".sample");

    $sample.each(function(index) {
        if($(this).is(":hover")) {
           $(this).css("background", "yellow");
        }
        else {
           $(this).css("background", "");
        }
    });  
}, 200);

如上面的评论所述,这意味着可能会返回一组元素,而不仅仅是一个元素。当然,可能会导致很多元素的开销......!

答案 2 :(得分:1)

至于为什么它不起作用,我会说它可能是一个错误,或者可能是它没有记录。我真的不知道。

但是,这是一个适用于jQuery 1.7.1,1.9和2.0.0b1的示例: http://jsfiddle.net/2kyaJ/125/

基本上不是使用.is(),而是可以查询所有悬停元素,然后检查是否至少有一个匹配($(".sample:hover").length而不是$(".sample").is(":hover"))。

我得到的印象是,当任何一个元素悬停时,你想要突出显示所有.sample元素,因此是第一个jsfiddle。但是,如果您只想突出显示悬停元素,可以尝试这样的方法: http://jsfiddle.net/2kyaJ/126/

此外,如果您只是想将某些东西绑定到悬停事件,而不是每0.2秒检查一次或多或少,您可以使用.hover()函数: http://jsfiddle.net/2kyaJ/127/

答案 3 :(得分:-2)

老实说,设定间隔是一个糟糕的想法......

只需设置一个悬停监听器。

$('.sample').hover(function() {
    console.log($this) // $(this) is the currently hovered element
})

JSFiddle:http://jsfiddle.net/jeffshaver/2kyaJ/124/