javascript - 调试意外的 jQuery mouseout 事件行为

Question

我正在尝试在 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');});
  });

});

您可以通过单击此处的预览 链接查看预览并在那里进行编辑:

http://jsbin.com/adofe/edit

我是 jQuery 新手。

Answer 1

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

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

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

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

这可以防止多次调用同一函数。

我会说使用 mouseenter 和 mouseleave 事件来防止额外的参数，但由于某些原因 jsbin 不认为它是一个函数。

http://jsbin.com/adofe/6/edit