Debugging unexpected jQuery mouseout event behaviour

I am trying to create a menu panel in jQuery, all is complete except for one problem. When I hover over a link, it shows a black panel, I want to be able to hide that panel only when mouse is out of that black panel area. Currently it fades out even if I am inside that black box.

Here is the script:

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');});
  });

});

You can see the preview of by clicking the Previ开发者_开发问答ew link there and edit it there too:

http://jsbin.com/adofe/edit

I am new to jQuery.

---

When you supply only one parameter to hover it uses it for mouse enter and mouse leave.

You should use hover instead of the mouseout event.

On your first call to hover supply a blank option as the second parameter.

On your second call to hover supply a blank function as the first parameter.

This prevents causing multiple calls to the same function.

I would say to use the mouseenter and mouseleave events to prevent the extra parameters but for some reason jsbin doesn't think it is a function.

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

---

First off, why not just put these two in CSS as a "start point"?

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

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

Second, if you just move your mouse over stuff repeatedly, you get a:

Stack overflow at line 25

Webpage error details

User Agent: Mozilla/4.0 (compatible; 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) Timestamp: Fri, 5 Mar 2010 14:21:26 UTC

Message: 'guid' is null or not an object Line: 25 Char: 10976 Code: 0 URI: http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js

Message: 'undefined' is null or not an object Line: 21 Char: 560 Code: 0 URI: http://jsbin.com/js/render/edit.js

Message: 'undefined' is null or not an object Line: 21 Char: 560 Code: 0 URI: http://jsbin.com/js/render/edit.js

Message: 'undefined' is null or not an object Line: 21 Char: 560 Code: 0 URI: http://jsbin.com/js/render/edit.js

Thirdly, you have

var link_rel = null;

then later in the code allocate a NEW variable of the same name:

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

see also

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

which gets reallocated each time a hover occurs.

This, along with the nesting of the elements (and position of the panel over the link) seem to lead to issues with the .hover event management.

---

you should move the div #panel_1, #panel_2, #panel_3 inside ul#menu li and when you over the div you still over the li, if you apply hover to li,not a. Other way is to store visibility of block and manage it.