Le survol de la souris ne fonctionne pas correctement

Question

Je crée un menu simple qui affichera les éléments du menu en cliquant sur le menu et se cachera lorsque vous quitterez menuitem.

http://jsfiddle.net/MMHVv/3/

Dans firefox cela ne fonctionne pas, le menuItem qui est caché quand mouseover

en chrome fonctionne correctement

Answer 1

Vous devez généralement éviter javascript en ligne, voir: http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/

Vous devez utiliser les fonctions mouseover et mouseout à la place: http://api.jquery.com/mouseover/

$(function() { 
    $('#menu').mouseover(function() { 
     $('#TestMenu').show(); 
    }).mouseout(function(){ 
    $('#TestMenu').hide(); 
    });; 

});

http://jsfiddle.net/MMHVv/16/

Le Testmenu devrait également être placé à l'intérieur de la première div, de sorte que le passage de la souris est également efficace lorsque vous passez la souris sur la Testmenu.

Answer 2

j'avais vu votre code ..

Je ne sais pas ce qui s'est passé avec l'événement mousemove dans firefox

si vous remplacez mousemove avec mouseover il fonctionne très bien ..

onmouseover="return ShowMenu($(this));" 

Answer 3

Essayez ceci juste avec votre structure, mais une modification [removed the id for the menuitems]:

$(function() { 
    $('.menu').on({ 
    mouseover: function() { 
     $('.menuItem').slideUp(); 
     $(this).next().slideDown(); 
    } 
    }); 
    $('.menuItem').on({ 
    mouseleave: function() { 
     $(this).slideUp(); 
    } 
    }); 
}); 

vérifier la fiddle