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

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

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

在您第一次呼叫悬停时，会提供一个空白选项作为第二个参数。

在第二次调用悬停时，将空白函数作为第一个参数。

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

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

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

Answer 2

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

 $('div[id*="panel"]').hide();

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

其次，如果你只是反复移动鼠标，你会得到：

第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'为null或不是对象行：25 查尔：10976 代码：0 URI：http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js

消息：'undefined'为null或不是对象行：21 查尔：560 代码：0 URI：http://jsbin.com/js/render/edit.js

第三，你有

var link_rel = null;

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

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

另见

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

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

。

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

Answer 3

你应该在ul＃menu li中移动div＃panel_1，＃panel_2，＃panel_3 当你超过div时，如果你将它悬停在li上，而不是a。其他方法是存储块的可见性并对其进行管理。

调试意外的jQuery mouseout事件行为

3 个答案: