jquery - NOT hover JQuery

Question

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.

Answer 1

要选择它，您可以执行以下操作：

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

或（是的，它们都有效）

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

虽然第二部真的很丑。。

如果这是您想要的“过度”：

$(yourselector).hover(handlerOut); 

（意思是）

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

您想要的“AND”，我认为它不受支持。你可能不得不做这样的事情

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

Answer 2

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.

Answer 3

既然我想我理解了这个问题，下面是答案：

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

这是我的小提琴：http: //jsfiddle.net/LFdsV/

虽然我不知道你为什么不使用.show()和.hide()添加和删除元素。

另请注意，仅当您的菜单元素嵌套时，上述内容才有效。