jQuery Hover Panes Мерцание на ребенка - PullRequest
Новая
       34

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

0 голосов
/ 05 мая 2010

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

Когда вы вводите мышь / оставляете мышью LI, дочерний элемент div должен появляться / исчезать, но проблема в том, что тег A в элементе hoverTab вызывает мерцание вкладки - как будто при наведении на ссылку мышь покинул ЛИ ...

Есть предложения?

Ответы [ 2 ]

0 голосов
/ 05 мая 2010

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

<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>

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

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

$('ul.tabNavigation > li')

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

0 голосов
/ 05 мая 2010

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

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

Не уверен, посмотрел ли я на то, что вы ищите, но это, похоже, очистило меня от этого. 

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

    });
...