[英]jQuery why does :hover work only once?
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. 我已经看过不同的帖子:hover是一个CSS选择器,但我不能理解为什么代码返回true如果obj中有1个链接但抛出javascript无法识别的表达式悬停错误,如果有2个或更多。
Here is a fiddle of :hover working: - http://jsfiddle.net/2kyaJ/122/ 这是一个小提琴:悬停工作: - 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? 4年后,这仍然是确定用户是否悬停在元素上的最佳且看似唯一的方法吗? If yes would anyone be able to provide an example?
如果是,那么任何人都能提供一个例子吗?
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). 我目前正在使用jQuery 1.9.1的插件中使用它,其中我在父元素(obj)的鼠标悬停上触发动画。 Hope someone else finds it useful in future.
希望其他人在将来发现它有用。 Use .length instead of .size as .size is deprecated from version 1.8 onwards.
从版本1.8开始,不推荐使用.length而不是.size作为.size。
function isMouseOver() {
if ($('a:hover', obj).length != 0) {
return true;
} else {
return false;
}
}
Usage: 用法:
var isURL = isMouseOver();
:hover
is not documented at http://api.jquery.com/ -- as such I wouldn't trust it to work in any particular way. :hover
没有记录在http://api.jquery.com/ - 因此我不相信它以任何特定的方式工作。 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. 问题似乎是,当在集合中有多个元素要迭代时,Sizzle会被这个伪选择器弄糊涂,虽然我无法通过查看代码来告诉乳清。
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 它甚至在您的第一个示例中工作的事实似乎是一个错误: 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
. 您可以绑定到一个“盘旋状”事件
mouseover
和mouseenter
。 There is, of course, the CSS pseudo-selector :hover
. 当然,还有CSS伪选择器
:hover
。
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...!
当然,可能会导致很多元素的开销......!
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.
我真的不知道。
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").length
而不是$(".sample").is(":hover")
)。
I got the impression you wanted to highlight all the .sample
elements when any of them are hovered, hence the first jsfiddle. 我得到的印象是,当任何一个元素悬停时,你想要突出显示所有
.sample
元素,因此是第一个jsfiddle。 However, if you only want to highlight the hovered element, you could try something like this: http://jsfiddle.net/2kyaJ/126/ 但是,如果您只想突出显示悬停元素,您可以尝试这样的事情: 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/
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/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.