jQuery .hover() срабатывает на старом элементе после зависания на новом

Question

У меня есть div с двумя ярлыками, вложенными в него, которые являются ссылками на другие страницы и находятся рядом друг с другом.

Я применяю слайд в действие к третьему div, который помещается под ярлыками при наведении указателя.

Проблема, с которой я сталкиваюсь, заключается в том, что эффект работает правильно, если я наводил на одну из ярлыков, а затем удалял из нее мышь, но не двигался в следующую метку.

Если я перехожу от метки к другой непосредственно, то слайд в действии скрытого div появляется на первом ярлыке, а не на текущем.

HTML:

<div class="top"> 
<label class="head left" id="home">Welcome - <?php echo $_SESSION['description'] . " (" . $_SESSION['lid'] . ")"; ?> 
</label> 
<label id="logout" class="head right">Logout</label> 

JQuery Код:

// Slide in effect for hover on class=head labels 
     $("#home, #logout").hover(function() { 
      // Set width to hovering element width: 
      $(".labelunderscore").css("width", $(this).width() + 20); 
      // Set position on labelunderscore to current element left value 
      $(".labelunderscore").css("left", $(this).offset().left); 
      // Check where are we hovering. Left side slide from left right from right 
      if ($(this).offset().left > $(window).width()/2) { 
       // We are on the right side 
       $('.labelunderscore').show('slide', {direction: 'right'}, 200); 
      } else { 
       // Left side 
       $('.labelunderscore').show('slide', {direction: 'left'}, 200); 
      } 
     }).mouseout(function() { 
      $('.labelunderscore').hide('slide', {direction: 'left'}, 200); 
     }) 

Answer 1

Найдено решение. Проблема заключалась в том, что div был создан на странице labelunderscore. Это «сбивает с толку» библиотеку jquery, пока она применяет эффект слайда, она должна применить эффект слайда на том же div.

Проблема была отсортирована путем создания в функции во время выполнения деления labelunderscore и присвоения ему уникального идентификатора на основе идентификатора наведенного элемента. Код выглядит следующим образом:

// Slide in effect for hover on class=head labels 
     $(".head").hover(function() { 
      //alert($(this).attr('id')) 
      $('#main').append('<div id="labelunderscore_' + $(this).attr("id") + '" class="labelunderscore"></div>'); 
      // Set width to hovering element width: 
      $('#labelunderscore_' + $(this).attr("id")).css("width", $(this).width() + 20); 
      // Set position on labelunderscore to current element left value 
      $('#labelunderscore_' + $(this).attr("id")).css("left", $(this).offset().left); 
      // Check where are we hovering. Left side slide from left right from right 
      if ($(this).offset().left > $(window).width()/2) { 
       // We are on the right side 
       $('#labelunderscore_' + $(this).attr("id")).show('slide', {direction: 'right'}, 200); 
      } else { 
       // Left side 
       $('#labelunderscore_' + $(this).attr("id")).show('slide', {direction: 'left'}, 200); 
      } 
     }, function() { 
      $('#labelunderscore_' + $(this).attr("id")).hide('slide', {direction: 'left'}, 200); 
     }) 

Answer 2

Просто слушать висения на родителю этикетках, поэтому они не рассматриваются как два отдельных элементов для mousein/выход:

например

$(".top").hover(function() { 

JSFiddle:http://jsfiddle.net/TrueBlueAussie/rto2hz5k/6/