JQuery MouseOut Event Problem

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 you can see the preview of by clicking the Preview link there and edit it there too:

http://jsbin.com/adofe/edit

It should be a very simple for experienced JQuery coders, I have not played with this as much, that's why unable to figure out.

Thanks

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

Answer 2

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.

Answer 3

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.