MouseEnter / MouseLeave显示绝对定位元素的问题

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

问题似乎是stats-content-container和edit-class-name之间存在差距，因此鼠标实际上会在某些点离开class-points，然后将鼠标悬停在edit-class-name上。

也许你可以尝试将你的mouseleave放在一个父元素上（可能是<ul class="user-stats">？很难说没有看到包含整个部分的实际html / css）。

Answer 2

您的编辑链接是否绝对定位？如果是这样，li和锚之间可能存在1px的间隙。需要看到HTML确定。