jquery菜单，悬停和显示：无

Question

我有这个菜单http://jsbin.com/useqa4/3

悬停我认为是正确的，但我想要的是正常：当用户的光标不在“解决方案”项目或子菜单上时，我希望div #submenuSolutions返回“显示：无”

我怎样才能做到这一点？

Answer 1

如果你仔细阅读jQuery api，你会发现悬停函数可以处理两个事件http://api.jquery.com/hover/

$("document").ready(function() {
  $("#menuSolutions a").hover(function () {
      $("#menuSolutions").addClass("menuHover");
      $("#submenuSolutions").show("3000");
  },function() {
    $("#menuSolutions").removeClass("menuHover");
    $("#submenuSolutions").hide("3000")});
});​

仅当您的菜单是suckerfish菜单时才会有效。

Answer 2

See Demo

---

刚刚添加此代码，以便在鼠标离开时隐藏它：

  $("#submenuSolutions").mouseleave(function(){
    $(this).hide();
  });

由于submenuSolutions是您的面板的ID，因此您可以使用当鼠标离开指定元素区域时触发的mouseleave事件。