0

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...

s1w_
  • 133
  • 8
  • 3
    I am not seeing any of the classes, `title`, `helper` or `helpers` appearing in the site you have linked. Also, please avoid linking to external sites, but reproduce your issue minimally using a code snippet or do it on [JSfiddle](http://jsfiddle.net). – Terry Oct 20 '14 at 19:33
  • 1
    Your `.each()` loop doesn't do anything. It tests whether the element is being hovered, but doesn't do anything depending on the result of it. The function just returns and it then goes to the next element in the loop. – Barmar Oct 20 '14 at 19:39

2 Answers2

1

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.

Christian
  • 19,605
  • 3
  • 54
  • 70
  • about scopes: i was raised on pure java, where break; was for breaking loops and return; was escaping whole function, but I admit that I am green to jQuery – s1w_ Oct 20 '14 at 20:36
  • @s1w_ Scopes are pretty confusing with js/jquery at first, but you'll get the hang of it. I'd highly recommend reading up on jquery scopes and closures so unexpected things don't happen :p – Christian Oct 20 '14 at 20:42
0

:hover as a pseudo-selector or pseudo-event has been deprecated since jQuery 1.8. This is mentioned (with a workaround) on another question.

If you change your code to:

if ($(".title").is(":focus") || $(".helper1").is(":focus") || $(".helper2").is(":focus"))

this seems to be valid and (without full testing) probably equivalent to your current code. Though the other issues raised in the comments ought to be a higher concern.

Community
  • 1
  • 1
Anthony
  • 36,459
  • 25
  • 97
  • 163
  • unfortunately this alternative seems to not working in my case.. i'd like to make code to be most update and compatible, but :hover in my case is still doing better result :/ – s1w_ Oct 20 '14 at 20:33