CODEWITHSUNDEEP
jqueryanimationhover
raeq
raeq

Reputation: 971

How to hide an element on hover out that is not the parent?

So for a nav, I am showing a "secondary" div when a certain "nav1" LI is hovered. I would like the div to be hidden when the focus is no longer on the #nav1 LI or the secondary div. jsFiddle Demo

Usually I would just place the "secondary" div inside the #nav1 li. But I can't do so for some logistical reasons. So I am basically trying to hide the secondary div on hover out only when the mouse is not on top of either #secondary or #nav1

Upvotes: 1

Views: 151

Answers (3)

azzy81
azzy81

Reputation: 2289

Does this help you at all: http://jsfiddle.net/EefAD/3/

Upvotes: 1

Anriëtte Myburgh
Anriëtte Myburgh

Reputation: 13527

Maybe set a timeout setTimeout(function, delay) on hover out callback of first element, and set a flag true on hover of second element, and set it back to false on hover out. When timeout is done, check if flag is true, then user is hovering over second element.

Upvotes: 0

j08691
j08691

Reputation: 208032

Have you tried this:

$("#secondary").mouseleave(function() {
    $(this).slideUp(500);
}​);​

jsFiddle example.

Upvotes: 1

Related Questions