jQuery Hover Panes Мерцание на ребенке

Question

OK. Вот мой основной HTML структура:

<ul class="tabNavigation"> 
    <li> 
    <a href="#">Main Button</a> 

    <div class="hoverTab"> 
     <a href="#">Link Within Div</a> 
    </div> 
    </li> 
</ul> 

И вот моя команда JQuery:

$('ul.tabNavigation li').mouseenter(function() { 
    $('ul.tabNavigation div.hoverTab').hide(); 
    $(this).children('div.hoverTab').stop(false, true).fadeIn('fast'); 
}); 

$('ul.tabNavigation li').mouseleave(function() { 
    $('ul.tabNavigation div.hoverTab').hide(); 
    $(this).children('div.hoverTab').stop(false, true).show().fadeOut('fast'); 
}); 

Когда вы MouseEnter/MouseLeave Л.И., ребенок ДИВ должен появляться/исчезать, но проблема заключается в А тег внутри div hoverTab вызывает мигание вкладки - как если бы, перевернув ссылку, мышь оставила LI ...

Любые предложения?

Answer 1

Я не совсем понимаю, что вы после. Но я добавил еще одну шкуру (см. Ниже), которая скрывает вкладку наведения при запуске.

Я просто положил это в свой документ, готовый над вашими указателями мыши/оставить привязки. Когда я сделал это, вкладка не показывалась при загрузке страницы, и ребенок чистым образом отображался и скрывался, когда я наводил курсор на ли.

Не уверен, что я над тем, что вам нужно, но это, казалось, очистило его для меня.

$(document).ready(function(){ 
    $('ul.tabNavigation div.hoverTab').hide(); 

    $('ul.tabNavigation li').mouseenter(function() { 
     $('ul.tabNavigation div.hoverTab').hide(); 
          $(this).children('div.hoverTab').stop(false, true).fadeIn('fast'); 
       }); 

    $('ul.tabNavigation li').mouseleave(function() { 
     $('ul.tabNavigation div.hoverTab').hide(); 
     $(this).children('div.hoverTab').stop(false, true).show().fadeOut('fast'); 
      }); 

    }); 

Answer 2

D'oh. Я понял это ... и Я должен был поставить полный код правильно, потому что это:

<ul class="tabNavigation"> 
    <li> 
    <a href="#">Main Button</a> 

    <div class="hoverTab"> 
     <ul> 
     <li><a href="#">Link Within Div</a></li> 
     </ul> 
    </div> 
    </li> 
</ul> 

Который делает все различия .... я бы тупо назначен MouseEnter/оставить все ребенок LI теги, а также ...

Изменение селекторы:

$('ul.tabNavigation > li') 

сделал правильно работать ...