Javascript 调试意外的jQuery mouseout事件行为

我正试图在jQuery中创建一个菜单面板，除了一个问题之外，其他都完成了。当我将鼠标悬停在一个链接上时，它会显示一个黑色面板，我希望只有当鼠标离开该黑色面板区域时才能隐藏该面板。现在，即使我在那个黑盒子里，它也会消失

以下是脚本：

var link_rel = null;

$(function(){
  // hide all panels first
  $('div[id*="panel"]').hide();

  // make the panels absolute positioned
  $('div[id*="panel"]').css('position', 'absolute');


  // setup each element ...
  $('#menu a').each(function(){
    var link_rel = $(this).attr('rel');
    var pos = $(this).offset();

    // get the panel near by hovered element now
    $('div#' + link_rel).css({
      'left': pos.left + 'px',
      'top': pos.top + 'px',
      'zIndex': '99'
    });
    $('div#' + link_rel).hover(function(){},
                               function(){$(this).fadeOut('slow');});
    $(this).hover(function(){
      // set z-index of previous panels low
      $('div[id*="panel"]').css('z-index', '0');

      // get the panel near by hovered element now
      $('div#' + link_rel).css({
        'left': pos.left + 'px',
        'top': pos.top + 'px',
        'zIndex': '99'
      });
      $('div#' + link_rel).fadeIn('slow');
    },
    function(){
     $('div#'+link_rel).css('z-index', '0');
     });
    $('div#' + link_rel).hover(function(){$(this).fadeIn('slow');},
                               function(){$(this).fadeOut('slow');});
  });

});

您可以通过单击此处的“预览”链接查看的预览，并在此处对其进行编辑：

我不熟悉jQuery。

您应该将div#panel#u 1、#panel#u 2、#panel#u 3移动到ul#菜单li中 当你在div上方时，你仍然在li上方，如果你将hover应用于li，而不是a。

---

另一种方法是存储块的可见性并对其进行管理。

首先，为什么不将这两个作为“起点”放在CSS中呢

第二，如果你只是将鼠标反复移动到物体上，你会得到：

第25行的堆栈溢出

网页错误详细信息

用户代理：Mozilla/4.0（兼容；MSIE 7.0；Windows NT 5.1；Trident/4.0；.NET CLR 1.1.4322；.NET CLR 2.0.50727；.NET CLR 3.0.04506.30；MDDR；.NET CLR 3.0.4506.2152；.NET CLR 3.5.30729；InfoPath.2；OfficeLiveConnector.1.3；OfficeLivePatch.0.0） 时间戳：2010年3月5日星期五14:21:26 UTC

消息：“guid”为空或不是对象 电话号码：25 字符：10976 代码：0 URI:

消息：“未定义”为空或不是对象 第21行 字符：560 代码：0 URI:

消息：“未定义”为空或不是对象 第21行 字符：560 代码：0 URI:

消息：“未定义”为空或不是对象 第21行 字符：560 代码：0 URI:

第三，你有

var link_rel = null;

然后在代码的后面部分分配一个同名的新变量：

var link_rel = $(this).attr('rel');

另见

var pos = $(this).offset();

每次发生悬停时都会重新分配

---

这与元素的嵌套（以及面板在链接上的位置）一起，似乎会导致.hover事件管理出现问题。

当您只提供一个参数来悬停时，它会将其用于鼠标进入和鼠标离开

您应该使用hover而不是mouseout事件

在第一次调用hover时，提供一个空白选项作为第二个参数

在第二次调用hover时，提供一个空函数作为第一个参数

这可以防止对同一函数进行多次调用

我想说使用mouseenter和mouseleave事件来防止额外的参数，但出于某种原因，jsbin认为这不是一个函数

---

仍然是相同的问题：（您更改了什么？我使用每个右悬停方法（2个函数）检查代码）@马克：解决方案是什么？我解决了所有这些问题，我只需要在鼠标离开其区域时能够隐藏黑匣子。如果你能对这些代码进行更正，那就太好了。谢谢。我刚刚回到你提供的链接，同样的问题也存在，你是如何解决这些问题的？jQuery 1.2.6没有用于

mouseenter

和

mouseleave

的快捷功能，但您仍然可以这样使用它们：

$（'selector'）.bind（'mouseenter'，function（）{}）

，而不是使用悬停和空函数。

var pos = $(this).offset();