Yes! That is exactly what I was looking for! I have implemented it and it works perfectly, thank you!
On Mar 3, 9:54 am, Jack Killpatrick <j...@ihwy.com> wrote: > Here's an example of a way to handle that: > > http://www.ihwy.com/Labs/demos/Current/image-hover-menu.aspx > > - Jack > > Nic Hubbard wrote: > > 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?
