Thanks. This almost seems like it would work. But, since the element that the hover is added to, and the element that is shown are different, by the time you move your mouse from the hover element to the element that is shown, your mouse moves out of the first element, and the shown div disappears.
Essentially it needs to have the functionality of css dropdowns: http://www.cssplay.co.uk/menus/final_drop.html They stay out there until your mouse moves off of them. On Mar 3, 12:14 am, Jack Killpatrick <j...@ihwy.com> wrote: > You might want to try .hover():http://docs.jquery.com/Events/hover#overout > > - Jack > > Nic Hubbard wrote: > > 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?
