Question

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 Preview link there and edit it there too:

http://jsbin.com/adofe/edit

I am new to jQuery.

Answer 1

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