trying use of mouseover and mouseout in jquery

Question

Hi,

i show ul,(it shows my submenu) like floowing code , i have problem with hiding ul, while i move mouse over ul(into menu) , it hides, and i cound not use of mouseout event correctly

how could i hide ul, just when mouseout of "ul li"

$("ul li").mouseover(function() {
   $(this).find('ul').show();

  }).mouseout(function(){
     $(this).find('ul').hide();
  });

Answer 1

Try using the bind method instead:

$("ul li").bind("mouseenter",function() {

});

$("ul li").bind("mouseleave",function() {

});

Answer 2

You can use the .hover() method which binds to the mousenter and mouseleave events, like this:

$("ul li").hover(function() {
  $(this).find('ul').show();
}, function(){
  $(this).find('ul').hide();
});

Or, if the children are initially hidden, you can shorten it further with .toggle(), like this:

$("ul li").hover(function() {
  $(this).find('ul').toggle();
});

The main difference is that mouseleave doesn't fire when entering a child where as mouseout does. Also mouseenter doesn't fire for descendant elements either, which is what you want in the case of your menu.