用的MouseEnter /鼠標離開的問題顯示絕對定位的元素

Question

http://screencast.com/t/2KncBbiroMz

上面的鏈接更準確地顯示你我有這個問題。但是，如果將鼠標懸停在LI元素上，懸停工作正常，那麼當您懸停鏈接時，顯示的鏈接就會消失。

這裏是我的HTML：

<div class="stats"> 
    <div class="container"> 
     <div class="row"> 
      <div class="span16"> 
       <ul class="user-stats"> 
        <li id="class-points"> 
         <span class="stats-content-container"> 
          <span class="class-name"><%= class_room_name %></span><br /> 
          <span class="large-headline"><%= total_game_points %></span> <span class="smaller-desc">points</span> 
         </span> 
         <a class="edit-class-name" href="#edit-class-name-modal" data-toggle="modal">edit name</a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 

的JavaScript：

​$(function(){ 
    $('ul.user-stats li#class-points').mouseenter(function() { 
     $('a.edit-class-name', this).stop(true, true).show(); 
    }).mouseleave(function() { 
     $('a.edit-class-name', this).stop(true, true).hide(); 
    }); 
});​​​ 

我甚至用純CSS的解決方案嘗試這樣做，我仍然有同樣的問題。

Answer 1

您的編輯鏈接是否完全定位？如果是這樣，li和錨點之間可能會有1px的差距。需要看到HTML是肯定的。

Answer 2

這個問題似乎是stats-content-container和edit-class-name之間有差距，所以鼠標在某些點上實際上離開了class-points，然後在edit-class-name上懸停。

也許你可以嘗試把你的mouseleave放在一個包含整個部分的父元素（可能是<ul class="user-stats">？很難說沒有看到實際的html/css）。