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

I have been using the following snippet to determine in Chrome/Safari & FF if a user is hovering over an anchor.

我一直在使用以下代码片段在Chrome/Safari & FF中确定用户是否在锚点上悬停。

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

I've seen varying posts about :hover being a CSS selector but what I can't get my head around is why the code returns true if there is 1 link within obj but throws a javascript unrecognized expression hover error if there are 2 or more.

我看到过各种各样的文章:悬浮是一个CSS选择器，但我搞不懂的是，如果obj中有一个链接，为什么代码返回true ?如果有两个或更多链接，则抛出一个javascript无法识别的表达式悬浮错误。

Here is a fiddle of :hover working: - http://jsfiddle.net/2kyaJ/122/

这里有一个小提琴:hover working: http://jsfiddle.net/2kyaJ/122/

Same but multiple elements (not working): - http://jsfiddle.net/2kyaJ/121/

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

Can anyone explain this to me?

有人能给我解释一下吗?

By the way I have seen this... How do I check if the mouse is over an element in jQuery?

顺便说一下，我看到了……如何检查鼠标是否在jQuery元素上?

4 years on is this still the best and seemingly only way to determine if a user is hovering over an element? If yes would anyone be able to provide an example?

4年过去了，这仍然是最好的，似乎是唯一的方法来确定用户是否在一个元素上徘徊?如果是，有人能提供一个例子吗?

Edit: had to go fishing for exactly what I needed but it turns out this, as simple as it is works really well.

编辑:我必须去钓鱼，因为我确实需要钓鱼，但事实证明，就这么简单，它真的很管用。

I am currently using it inside a plugin with jQuery 1.9.1 where I am triggering an animation on a mouseover of a parent element (obj). Hope someone else finds it useful in future. Use .length instead of .size as .size is deprecated from version 1.8 onwards.

我目前正在jQuery 1.9.1的一个插件中使用它，在这个插件中，我在父元素(obj)的鼠标悬停上触发一个动画。希望别人发现它在未来有用。使用.length而不是.size作为.size从1.8版本开始就不赞成使用。

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

Usage:

用法:

var isURL = isMouseOver();

4 个解决方案

#1

:hover is not documented at http://api.jquery.com/ -- as such I wouldn't trust it to work in any particular way. The problem seems to be that Sizzle is getting confused by this pseudo-selector when there is more than one element to iterate over in the collection, although I can't really tell whey by looking at the code.

:在http://api.jquery.com/上没有对hover效果进行记录——因此我不相信它会以任何特定的方式工作。问题似乎是，当集合中有多个元素要迭代时，Sizzle就会被这个伪选择器搞糊涂，尽管我不能通过查看代码来真正分辨出whey。

The fact that it is even working in your first example seems to be a bug: http://jsfiddle.net/2kyaJ/122/ -- it does not work with jQuery 1.9

它甚至在您的第一个示例中工作的事实似乎是一个bug: http://jsfiddle.net/2kyaJ/122/——它与jQuery 1.9不兼容。

As for how to tell if an element is hovered -- I'm not sure what circumstances you would need to do that. Instead, it's better to take action when a hover is triggered. You can bind to a "hover-like" event with mouseover and mouseenter. There is, of course, the CSS pseudo-selector :hover.

至于如何判断一个元素是否处于悬停状态——我不确定您需要在什么情况下这样做。相反，当鼠标悬停时最好采取行动。您可以使用鼠标悬停和鼠标中心绑定到“悬浮”事件。当然，还有CSS伪选择器:hover。

#2

Try this fiddle http://jsfiddle.net/2rU4U/:

试试这个小提琴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);

As mentioned in the comment above, this respects the fact that a collection of elements might be returned, not just a single one. Might cause quite a bit of overhead with lots of elements of course...!

正如上面的注释所提到的，这尊重了元素集合可能被返回的事实，而不仅仅是单个元素。可能会造成相当大的开销，当然有很多元素…!

#3

As to why it doesn't work your way, I'd say it could be a bug or it could be that it's undocumented. I don't really know.

至于为什么它不能按照你的方式工作，我想说它可能是一个bug，也可能是它没有文档。我真的不知道。

However, here's an example that works in jQuery 1.7.1, 1.9, and 2.0.0b1: http://jsfiddle.net/2kyaJ/125/

但是，这里有一个使用jQuery 1.7.1、1.9和2.0.0b1的示例:http://jsfiddle.net/2kyaJ/125/

Basically instead of using .is() you can query for all hovered elements and then check that there is at least one match ($(".sample:hover").length rather than $(".sample").is(":hover")).

基本上，不使用.is()，您可以查询所有挂起的元素，然后检查是否至少有一个匹配($(“.sample:hover)”)。长度而不是$("采样").(":徘徊"))。

I got the impression you wanted to highlight all the .sample elements when any of them are hovered, hence the first jsfiddle. However, if you only want to highlight the hovered element, you could try something like this: http://jsfiddle.net/2kyaJ/126/

我得到的印象是，你想要突出所有的。样本元素，当它们中的任何一个都被悬浮，因此是第一个jsfiddle。但是，如果您只想突出显示这个悬浮元素，您可以尝试以下内容:http://jsfiddle.net/2kyaJ/126/

Also, if you're simply looking to bind something to the hover event, rather than checking more or less every 0.2 seconds you could just use the .hover() function: http://jsfiddle.net/2kyaJ/127/

此外，如果您只是想要将某些内容绑定到悬浮事件，而不是每0.2秒检查或多或少，那么您可以使用.hover()函数:http://jsfiddle.net/2kyaJ/127/

#4

-2

Honestly, setting an interval is a terrible idea...

老实说，设置间隔是一个糟糕的想法……

Just set a hover listener.

设置一个悬浮监听器。

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

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

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

#1