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/