jquery - 鼠标悬停无法正常工作

Question

我正在创建一个简单的菜单，它会在单击菜单时显示菜单项，并在从 menuitem 鼠标移出时隐藏。

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

在 Firefox 中这不起作用，menuItem鼠标悬停时隐藏

在 chrome 中它可以正常工作

Answer 1

您通常应该避免使用内联 javascript，请参阅： http ://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/

您应该改用 mouseover 和 mouseout 函数：http: //api.jquery.com/mouseover/

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

});

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

TestMenu 也应该放在第一个 div 内，因此当您将鼠标悬停在 TestMenu 上时，鼠标悬停也有效。

Answer 2

我看过你的代码..

我不知道mousemoveFirefox 中的事件出了什么问题

如果你mousemove用它代替mouseover它工作正常..

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

Answer 3

仅使用您的结构尝试此操作，但要进行一次编辑 [ removed the id for the menuitems]：

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

看看小提琴