0

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 解决方案尝试了这个，但我仍然遇到同样的问题。

4

2 回答 2

1

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

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

于 2012-12-17T17:41:12.797 回答
1

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

于 2012-12-17T17:42:05.063 回答