I have a menu that is activated on mouseover a link. The menu is a
hidden div which appears. My problem now is how to remove/hide that
div when a user move their mouse off of the menu. I have tried adding
a mouseout event to the div, but because there are child divs inside
that div, any mousing over them hides the parent div as well, which I
don't want. I only want it to hide if the mouse is outside the parent
div, not anywhere within it.
// ----- Show Artists Menu When Link moused over ------
$('a#Artists').mouseover(function() {
// Show Our Artists Box
$('#artistsBox').fadeIn('slow');
});//end mouseover
// ----- Add Stuff When Link moused over ------
$('#artistsBox').mouseover(function() {
// Add a mouse out on our box
$('#artistsColumns').mouseout(function() {
// Hide Our Artists Box
$('#artistsBox').fadeOut('slow');
});//end mouseover
});//end mouseover
<div id="artistsBox" style="display:none;">
<div id="artistsColumns">links and stuff in here</div>
</div>
Because the mouseout event is attatched to artistsBox, mousing over
artistsColumns hides the div as well, which I don't want.
Any ideas?
