jQuery 1.8:不支持的伪:悬停

时间:2022-11-07 19:07:42

The following code raises the error unsupported pseudo: hover on jQuery 1.8, while it works perfect on jQuery 1.7.2:

下面的代码在jQuery 1.8上引发了错误不支持的伪:hover,而它在jQuery 1.7.2上工作得很好:

if(!$(this).parent().find('ul').first().is(':hover')) {   $(this).parent().parent().removeClass('open');}

Does anyone know what's going on?

有谁知道发生了什么?

4 个解决方案

#1


Unfortunately, while we all wish that our code were future proof, your $('foo').on( 'hover, ... function(){ //do stuff } code is deprecated in jQuery 1.8. I wish I had better news for you, but your code is broken because of a core change to jQuery 1.8. You now have to use the syntax

不幸的是,虽然我们都希望我们的代码是未来的证明,但你的$('foo')。on('hover,... function(){// do stuff}代码在jQuery 1.8中已被弃用。我希望我有更好的新闻,但由于jQuery 1.8的核心更改,您的代码已被破坏。您现在必须使用语法

$('.selector').on( 'mouseenter mouseleave', function() {      $(this).toggleClass('hover');   });if(!$(this).parent().find('ul').first().hasClass('hover')) {   $(this).parent().parent().removeClass('open');}

Wish I had better news for you, but deprecation happens :/ ... jQuery 1.8 doesn't like your shortcut and they've deprecated the hover event handler from .on() and also the pseudo-selector :hover, so it can't be used that way any more.

希望我有更好的消息,但是发生了弃用:/ ... jQuery 1.8不喜欢你的快捷方式,他们已经弃用了.on()的悬停事件处理程序以及伪选择器:hover,所以它可以不再这样使用了。

#2


Old question, but for anyone googling:

老问题,但对于任何人谷歌搜索:

A workaround for this is to go the other way round:

对此的解决方法是反过来:

$(":focus, :active").filter($(".your-element"));

…because .filter() also accepts jQuery objects, this will match any elements with the pseudos :focus and :active that also have the class .your-element.

...因为.filter()也接受jQuery对象,这将匹配任何带有伪的元素:focus和:active,它们也有类.your-element。

In other words, if .your-element isn't hovered or active, this selection matches no elements.

换句话说,如果.your-element未悬停或处于活动状态,则此选择不匹配任何元素。

#3


weird - for me, .is(":hover") is still working in 1.8, but broken in 1.9.1.

很奇怪 - 对我来说,.is(“:hover”)仍然在1.8中运行,但在1.9.1中被破坏了。

Anyway, here is a fix

无论如何,这是一个修复

function mouseIsOverWorkaround(what){    var temp = $(what).parent().find(":hover");    return temp.length == 1 && temp[0] == what;}

then call above function on the "naked" (non jQuery-wrapped) element. In your case,

然后在“裸”(非jQuery包装)元素上调用上面的函数。在你的情况下,

if(!mouseIsOverWorkaround($(this).parent().find('ul').first()[0]) {   $(this).parent().parent().removeClass('open');}

(don't forget the [0])

(别忘了[0])

the above-mentioned (comment to orig question) fiddle http://jsfiddle.net/nnnnnn/Tm77a/ does not work in jQuery 1.9.1

上面提到的(对orig问题的评论)小提琴http://jsfiddle.net/nnnnnn/Tm77a/在jQuery 1.9.1中不起作用

fiddle with this one http://jsfiddle.net/mathheadinclouds/BxL4w/

摆弄这个http://jsfiddle.net/mathheadinclouds/BxL4w/

#4


maybe you can fix this using a bit of code (but yet maybe expensive)
add class hover on mouseenter, remove it on mouseleave and then test on it.

也许你可以使用一些代码解决这个问题(但可能很昂贵)在mouseenter上添加类悬停,在mouseleave上删除它然后测试它。

$('.selector').hover(    function(){$(this).addClass('hover');},    function(){$(this).removeClass('hover');});if(!$(this).parent().find('ul').first().hasClass('hover')) {   $(this).parent().parent().removeClass('open');}

#1


Unfortunately, while we all wish that our code were future proof, your $('foo').on( 'hover, ... function(){ //do stuff } code is deprecated in jQuery 1.8. I wish I had better news for you, but your code is broken because of a core change to jQuery 1.8. You now have to use the syntax

不幸的是,虽然我们都希望我们的代码是未来的证明,但你的$('foo')。on('hover,... function(){// do stuff}代码在jQuery 1.8中已被弃用。我希望我有更好的新闻,但由于jQuery 1.8的核心更改,您的代码已被破坏。您现在必须使用语法

$('.selector').on( 'mouseenter mouseleave', function() {      $(this).toggleClass('hover');   });if(!$(this).parent().find('ul').first().hasClass('hover')) {   $(this).parent().parent().removeClass('open');}

Wish I had better news for you, but deprecation happens :/ ... jQuery 1.8 doesn't like your shortcut and they've deprecated the hover event handler from .on() and also the pseudo-selector :hover, so it can't be used that way any more.

希望我有更好的消息,但是发生了弃用:/ ... jQuery 1.8不喜欢你的快捷方式,他们已经弃用了.on()的悬停事件处理程序以及伪选择器:hover,所以它可以不再这样使用了。

#2


Old question, but for anyone googling:

老问题,但对于任何人谷歌搜索:

A workaround for this is to go the other way round:

对此的解决方法是反过来:

$(":focus, :active").filter($(".your-element"));

…because .filter() also accepts jQuery objects, this will match any elements with the pseudos :focus and :active that also have the class .your-element.

...因为.filter()也接受jQuery对象,这将匹配任何带有伪的元素:focus和:active,它们也有类.your-element。

In other words, if .your-element isn't hovered or active, this selection matches no elements.

换句话说,如果.your-element未悬停或处于活动状态,则此选择不匹配任何元素。

#3


weird - for me, .is(":hover") is still working in 1.8, but broken in 1.9.1.

很奇怪 - 对我来说,.is(“:hover”)仍然在1.8中运行,但在1.9.1中被破坏了。

Anyway, here is a fix

无论如何,这是一个修复

function mouseIsOverWorkaround(what){    var temp = $(what).parent().find(":hover");    return temp.length == 1 && temp[0] == what;}

then call above function on the "naked" (non jQuery-wrapped) element. In your case,

然后在“裸”(非jQuery包装)元素上调用上面的函数。在你的情况下,

if(!mouseIsOverWorkaround($(this).parent().find('ul').first()[0]) {   $(this).parent().parent().removeClass('open');}

(don't forget the [0])

(别忘了[0])

the above-mentioned (comment to orig question) fiddle http://jsfiddle.net/nnnnnn/Tm77a/ does not work in jQuery 1.9.1

上面提到的(对orig问题的评论)小提琴http://jsfiddle.net/nnnnnn/Tm77a/在jQuery 1.9.1中不起作用

fiddle with this one http://jsfiddle.net/mathheadinclouds/BxL4w/

摆弄这个http://jsfiddle.net/mathheadinclouds/BxL4w/

#4


maybe you can fix this using a bit of code (but yet maybe expensive)
add class hover on mouseenter, remove it on mouseleave and then test on it.

也许你可以使用一些代码解决这个问题(但可能很昂贵)在mouseenter上添加类悬停,在mouseleave上删除它然后测试它。

$('.selector').hover(    function(){$(this).addClass('hover');},    function(){$(this).removeClass('hover');});if(!$(this).parent().find('ul').first().hasClass('hover')) {   $(this).parent().parent().removeClass('open');}