CODEWITHSUNDEEP
jqueryhtmlcss
Loolooii
Loolooii

Reputation: 9162

How to hide this navigation menu when its hover event is not triggered anymore?

I have a small navigation menu which opens when its hover event is called. When I choose an item in the menu its current item changes to the chosen item and the menu disappears. So far so good. Now what I would like to achieve is that the menu also disappears when I don't choose any item and I just move the mouse to somewhere else. I've made an example on jsFiddle: See here

I've already tried blur(), first of all it doesn't work and second of all I want the menu to disappear already when the hover is gone and not after someone has clicked somewhere else. Thanks.

Upvotes: 0

Views: 83

Answers (2)

Ohgodwhy
Ohgodwhy

Reputation: 50787

Here, I rewrote it to work the way it's intended...

.live() is deprecated in 1.7 and .on() should be used in favor of this. However, hover isn't supported with a callback in .on(), so we use mouseover and mouseout events in a chain to replicate the same idea as a callback function.

Also, moved around the elements and added a span to handle our 'text' update.

Here's the jSfiddle. Note changes in all AREAS: CSS, HTML & jQuery

Upvotes: 1

Tomer
Tomer

Reputation: 17930

Use mouseout:

$('.small-nav-left').live('mouseout', function() {
        $('.small-nav-menu-left').hide();
    });

see fiddle.

Upvotes: 1

Related Questions