$（“.someclass”）。（“：hover”）仅适用于单个“someclass”例 [英] $(".someclass").is(":hover") works well for only single "someclass" instance

问题描述

我有奇怪的问题。我想要.slideUp（）某些div在点击任何地方后，但只有当鼠标没有悬停特定元素...

  $ （body）。mousedown（function（）{
 if（$（。title）。is（：hover）|| $（。helper）。is（：hover） ）return; 
 $（。helpers）。slideUp（）; 
}）; 
 $（。title）。mouseover（function（）{
 $（。helpers）。slideDown（）; 
}）; 
  

这段代码对我来说很好（把dev_helpers悬停在 http://siwego.net - 首页），直到我不得不将第二个.helper元素添加到源代码中。之后，点击正文，javascript转储出现以下错误：

 错误：语法错误，无法识别的表达式：不支持的pseudo：hover 
  

我试图修改循环元素的代码：

  $（body）。mousedown（function（）{
 if（$（。title）。is（：hover））return; 
 $（'。helper'）。each（function（i，obj）{
 if（$（this）.is（：hover））return; 
}）; 
 $（。helpers）。slideUp（）; 
}）; 
 $（。title）。mouseover（function（）{
 $（。helpers）。slideDown（）; 
}）; 
  

错误不再显示，但是：悬停检查'每个'都不起作用我必须这样做：

  $（body）。mousedown（function（）{
 if（$（。title）。is（：hover）|| $（。helper1）。is（：hover ）|| $（。helper2）。is（：hover））return; 
 $（。helpers）。slideUp（）; 
}）; 
 $（。title）。mouseover（function（）{
 $（。helpers）。slideDown（）; 
}）; 
  

但它对我来说不是解决方案，因为我必须为每个.helperX实例.....

也许有人会有任何线索......

解决方案

如前所述，：hover 伪选择器似乎存在一些问题，但它在Chrome上使用jQuery edge时可以工作。

您不需要使用 .each（）循环（并且您似乎无法理解 return 在 .each（）范围内，它并不返回出 mousedown ）。无论如何，你可以这样做：

  if（$（。title）。is（：hover） || $（。helper：hover）。length）return; 
  

你可以在这里看到它： http://jsfiddle.net/4x661tt6/ 。但是，：hover 在其他浏览器中可能不可靠，所以我不会相信它。

I have bizarre problem. I want to .slideUp() some div after click anywhere, but only if mouse is not hovering specific elements...

$("body").mousedown(function() {
    if ($(".title").is(":hover") || $(".helper").is(":hover")) return;
    $(".helpers").slideUp();
});
$(".title").mouseover(function() {
    $(".helpers").slideDown();
});

This code was working for me well (hover "dev_helpers" at http://siwego.net -top page), until I had to add second ".helper" element into source. After that, clicking the body, javascript dumps following error:

Error: Syntax error, unrecognized expression: unsupported pseudo: hover

I was trying to modify the code for looping elements:

$("body").mousedown(function() {
      if ($(".title").is(":hover")) return;
      $('.helper').each(function(i, obj) {
           if ($(this).is(":hover")) return;
      });
      $(".helpers").slideUp();
});
$(".title").mouseover(function() {
    $(".helpers").slideDown();
});

Error is not showing up anymore, but :hover check 'for each' is not working (its not preventing slideUp()).

I had to do this:

$("body").mousedown(function() {
    if ($(".title").is(":hover") || $(".helper1").is(":hover") || $(".helper2").is(":hover")) return;
    $(".helpers").slideUp();
});
$(".title").mouseover(function() {
    $(".helpers").slideDown();
});

But its not solution for me, since I have to add new element check for each ".helperX" instance.....

Maybe someone will have any clue...

解决方案

As mentioned the :hover pseudoselector seems to have some issues, however it does work for me on Chrome using jQuery edge.

You don't need to use your .each() loop (and you don't seem to understand how scopes work. return is scoped within the .each(), it doesn't return out of the mousedown). Anyway, you can do something like this:

if ( $(".title").is(":hover") || $(".helper:hover").length ) return;

You can see it working here: http://jsfiddle.net/4x661tt6/. However, :hover might be unreliable in other browsers, so I wouldn't trust it.

这篇关于$（“.someclass”）。（“：hover”）仅适用于单个“someclass”例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！