union jquery on mouseenter

Question

I have a Nav that has a drop down sub menu. When the drop down appears i would like a union of menu + drop down like this:

enter image description here

so that if the mouse exits this entire block in pink, then the sub nav disappears. Currently, if the mouse exits only the drop down, the dropdown is gone. I saw this example but combining the class together did not work for me.

Here's MY FIDDLE

Erm... and what exactly now doesn't work? For me, it works both when mouse leaves 'item0' and 'item1' areas. — raina77ow, Sep 17 '12 at 23:50
if you place your mouse over `item 0` the drop down appears, then move your mouse over the dropdown then back up to `item 0`, the drop down should NOT disappear — t q, Sep 17 '12 at 23:52
First problem I see as I trace the mouseOut event out to the console is that as I roll my mouse up the list and back towards item0 is that the to element is registering as body, not that list item. Maybe there is an issue with forcing list items to be blocks instead of using actual block elements like divs. — invertedSpear, Sep 18 '12 at 00:12
@invertedSpear are you suggesting that i change the markup from `li` to `div`? — t q, Sep 18 '12 at 00:17
[mouseleave](http://api.jquery.com/mouseleave/) != [mouseout](http://api.jquery.com/mouseout/). — raina77ow, Sep 18 '12 at 00:24

score 0 · Accepted Answer · answered Sep 18 '12 at 00:19

Why don't just remove the subClass from targets of both mouseenter AND mouseleave? Like this:

var animate;
$(".myClass").mouseenter(function () {
  clearTimeout(animate);
  $('.myClass').css('background-color','#777');
  $('.mySubClass').css('display','inline');
});
$(".myClass").mouseleave(function() {
  animate = setTimeout(function(){
    $('.myClass .mySubClass').css('display','none');
    $('.myClass').css('background-color','#49616a');
  }, 800);
});

... as .myClass covered area IS already a union of menu and drop (as the corresponding element includes both link and dropdown menu).

I've fixed another potential bug here: it's possible to sequence mouseleave-mouseenter events too fast, then timeout function will fire even though it shouldn't (as the cursor stays in the menu area). To prevent this, an additional variable (animate) has been added; it stored the timeout in the mouseleave handler and clears it in the `mouseenter' one.

i didnt realize `.myClass` covered area IS already a union of menu and drop — t q, Sep 18 '12 at 00:25

union jquery on mouseenter

1 Answers1