Отладка неожиданного поведения 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

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) Отметка времени: пятница, 5 марта 2010 г. 14:21:26 UTC

Сообщение: 'guid' является нулем или не является объектом Линия: 25 Char: 10976 Код: 0 URI: http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js

Сообщение: «undefined» является нулем или не является объектом Линия: 21 Char: 560 Код: 0 URI: http://jsbin.com/js/render/edit.js

Сообщение: «undefined» является нулем или не является объектом Линия: 21 Char: 560 Код: 0 URI: http://jsbin.com/js/render/edit.js

Сообщение: «undefined» является нулем или не является объектом Линия: 21 Char: 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

Вы должны переместить div # panel_1, # panel_2, # panel_3 внутри ul # меню li и когда вы выходите за div, вы все равно за li, если вы применяете hover к li, а не a. Другой способ - сохранить видимость блока и управлять им.