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

找到了解決辦法。問題是在頁面中創建的labelunderscore div。在應用幻燈片時，這會「混淆」jquery庫，它必須在同一div上應用幻燈片效果。

該問題已通過在運行時在函數中創建labelunderscore div並根據hovered元素的id爲其分配唯一ID來進行排序。代碼如下：

// 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 /出兩個獨立的元素：

eg

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

的jsfiddle：http://jsfiddle.net/TrueBlueAussie/rto2hz5k/6/