【问题标题】:.is(":hover") is broken as of jQuery 1.9 How to fix.is(":hover") 自 jQuery 1.9 起已损坏 如何修复
【发布时间】:2013-05-06 00:50:39
【问题描述】:

在做$(...your selector here...).is(":hover")时,1.9.1之前的jQuery给出了正确的答案,而jQuery 1.9.1告诉你:

错误:语法错误,无法识别的表达式:不支持的伪:hover

这不是关于在悬停时执行操作 - 为此,只需使用 .hover() 这是关于在任意时间点找出某个元素是否被悬停

感谢 Mooseman 的回答,我将通过 fiddle 进行演示

【问题讨论】:

  • 您想回答自己的问题吗?如果这样做正确:写一个答案。
  • 你把事情弄复杂了。只需.hover() 即可:jsfiddle.net/BxL4w/5
  • @Anthony:错了。我想要一个布尔值,它是否悬停。我不想在悬停时执行操作。
  • 你不应该把答案放在问题中。如果您愿意,您可以回答自己的问题。

标签: jquery hover


【解决方案1】:

假设您的选择器是#myid,请使用$('#myid:hover') 而不是.is()

如果您使用$(this) 或变量,请使用myVar.filter(':hover')

【讨论】:

  • 使用$(this)或变量对象时怎么样?
  • 然后,使用 var temp = $(yourElement).parent().find(":hover"); return temp.length == 1 && temp[0] == yourElement;
  • @tq 添加到我的答案中。
  • 在 jQuery 3.1.1 中不起作用...我在事件处理程序中尝试 $('#myid:hover').length > 0
  • .filter(:hover) 似乎总是返回一个对象,filter(:hover).length 有效。请考虑更新。
【解决方案2】:

但是,当您将使用 jQuery.fn.is() 的元素与事先未知的组合选择器进行比较时,上述解决方法不适合,并且可能匹配父容器中的多个元素。

例如,相同的抛出异常时selectorText在style_get(下面)等于: “.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:悬停.mCSB_dragger .mCSB_dragger_bar” P>

..因为悬停未在 Sizzle.selectors.pseudos 或 Sizzle.selectors.setFilters 中定义(jquery-2.1.4,第 1764 行)..

function style_get(elem) {

  var sheets=document.styleSheets;
  var css_properties={};
  elem=$(elem);

  for (var s in sheets) {
    var rules=sheets[s].rules || sheets[s].cssRules;

    for (var r in rules) {
      if (elem.is(rules[r].selectorText)) {

        css_properties=$.extend(
          css_properties,
          css.parse(rules[r].style),
          css.parse(elem.attr('style'))
        );

      }
    }

  }

  return css_properties;

}

【讨论】:

  • 您指的是哪个“解决方法”是“不合适的”?你是在评论另一个帖子吗?如果是这样,您应该在该帖子上发表评论。您的回答似乎不完整。
  • @Kmeixner,OP 写道“这是一种解决方法......”它可能是您所问问题的答案。我使用 ctrl+f 并输入“workaround”很容易找到它
【解决方案3】:

你可以尝试使用 .filter()

我想,我的解决方案会对你有所帮助:

//
// jQuery 3 pseudo ':hover' doesn't support
//

// Working on jQuery 1.7.1
$("*").on('click', $.proxy(function() {
    if ( this.$('.tooltip:hover').length > 0 ) { // jQuery 3.2.1 -> Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: hover
      console.log('Hovered!');
    } else { 
      console.log('Where is my element!?'); 
    }
}, this));


// Updated solution for jQuery 1.7.1 - 3.2.1
$("*").on('click', $.proxy(function() {
    var isHovered = $('.tooltip').filter(function() {
        return $(this).is(":hover");
    });

    if ( isHovered.length > 0 ) {
      console.log('Hovered!');
    } else { 
      console.log('Where is my element!?'); 
    }
}, this));

另外,您可以查看我的 GitHub 要点:https://gist.github.com/antydemant/74b00e27790e65f4555a29b73eea7bb2

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2019-12-01
    • 1970-01-01
    • 2011-10-09
    • 2011-09-04
    • 2011-02-12
    • 1970-01-01
    • 2010-11-23
    • 1970-01-01
    相关资源
    最近更新 更多