CODEWITHSUNDEEP
jqueryhover
Multitut
Multitut

Reputation: 2169

NOT hover JQuery

I'm building a multilevel (fixed to 3 levels) menu using JQuery. Everything is working fine but what I'd like to do is making all the levels disappear when any of them are being hovered.

I'm looking for something like this:

$('#categories AND #subcategories AND #tags').live('-NOT-mouseover', function(){
    $('#categories, #subcategories, #tags').remove();
});

Also, I don't know how to get an AND operator on a JQuery selector.

Upvotes: 0

Views: 7837

Answers (3)

Mark Eirich
Mark Eirich

Reputation: 10114

Now that I think I understand the question, here's a stab at the answer:

var leaveTimer;
$('#categories, #subcategories, #tags').hover(function() {
    if (leaveTimer) clearTimeout(leaveTimer);
}, function() {
    var $this = $(this);
    leaveTimer = setTimeout(function() {
        $this.remove();
    }, 500);
});

Here's my fiddle: http://jsfiddle.net/LFdsV/

Although I don't know why you aren't using .show() and .hide() vs. adding and removing the elements.

Also note that the above will only work if your menu elements are nested.

Upvotes: 1

fmsf
fmsf

Reputation: 37137

to select it you can do:

   $(".commonClass:not(:hover)")

or (yes both of them work)

$('#categories:not(:hover), #subcategories:not(:hover), #tags:not(:hover)')

Although it is really ugly this second one..

If it's the "over out" that you want:

$(yourselector).hover(handlerOut);

(which means)

$(yourselector).hover(function(){ console.log("i've just existed whatever you had in your selector"); });

The "AND" you want, I don't think it is supported. You will probably have to do something like this

$("#categories, #subcategories, #tags").hover(function(){
   if($('#categories:hover, #subcategories:hover, #tags:hover').length==0){
      doStuff();
   }
});

Upvotes: 6

gdoron
gdoron

Reputation: 150253

  1. Don't use live.
  2. Give those elements a class
  3. remove removes the elements from the DOM for good!, just hide them.

Code:

$('.classForThoseelements').hover(function(){
    $(this).toggle();
});

Of course you can still use the ids:

$('#categories, #subcategories, #tags')...

But it's not that clean.

Upvotes: 3

Related Questions