CODEWITHSUNDEEP
jquerycssmouseeventslidetoggle
LBF
LBF

Reputation: 1205

Show on click, but hide on mouseout - not working?

I'm ALMOST there with this issue, but have hit a wall.

I have a main nav list that shows dropdown content on hover, and then when you click the parent link, it needs to reveal a new div of content in place of the original dropdown. I've got that working. HOWEVER, I need the new div to disappear when you mouseout of the parent <li>. This is where the problem starts. No matter what I do, it seems to be acting when you mouseout from the link, instead of the <li>.

Here is a fiddle to see what I mean: http://jsfiddle.net/nWxdR/25/

Click "about" to show the blue div. Then after you roll your mouse off the words, you lose the blue div. I want the blue div to stay until you roll off of the entire <li> - not the link.

(Note: The gap between the main link and the sublinks is supposed to be there -- there's going to be a background image there.)

I'm grateful for any help. Thank you!

Upvotes: 0

Views: 1878

Answers (2)

otherDewi
otherDewi

Reputation: 1098

slidetoggle() will animate the text in on mouse over and out again on mouse out. change this to .show() or animated reveal of your choice. Combine this with the answer given above.

Upvotes: 0

Raoul George
Raoul George

Reputation: 2797

Use jQuery's mouseleave event instead of mouseout.

Jsfiddle

$(".about").mouseleave(function() { 
    $("#about-text").hide();
});

From jQuery's docs -

The mouseleave event differs from mouseout in the way it handles event bubbling. If mouseout were used in this example, then when the mouse pointer moved out of the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseleave event, on the other hand, only triggers its handler when the mouse leaves the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse leaves the Outer element, but not the Inner element.

Upvotes: 2

Related Questions