jquery悬停问题

Question

这是代码

        //show delete link on hover
    $('li.dir, li.file').live('mouseover mouseout', function(event) {
          if (event.type == 'mouseover') {
            $(this ).find("span.delete_file").delay(800).fadeIn('fast');
          }
           else{
            $(this).find("span.delete_file").fadeOut('fast');
          }
    });

HTML

                <li class="dir" title="">
                    <span class="pin"></span>
                    <span  class="name">test</span> 
                    <span class="delete_file" title="/test"></span>
                        <ul class="sub_folder">
                        </ul>

                </li>

CSS

ul.sub_folder{
    margin-left:15px;
    padding:0;
    list-style:none;
}

    ul.sub_folder > li{
        margin:0;
        line-height: 20px;
        cursor:pointer;
        display:block;
    }
    ul.sub_folder > li:hover{
        background:eee;
    }
        ul.sub_folder > li.file {
            margin-left: 5px;
        }
        ul.sub_folder > li.file > span.name{
            background:url("/site_images/file.png") left no-repeat;
            padding-left: 20px;
        }

        ul.sub_folder > li.dir > span.name{
            margin-left:5px;
            background:url("/site_images/folder.png") left no-repeat;
            padding-left: 20px;     
        }

        ul.sub_folder > li.file > span.delete_file{
            background:url("/site_images/cancel.png") left no-repeat;
            padding-left: 20px;
            width: 16px;
            height: 16px;
        }

        ul.sub_folder > li.dir > span.delete_file{
            margin-left:5px;
            background:url("/site_images/cancel.png") left no-repeat;
            padding-left: 20px;

        }

            ul.sub_folder > li.dir > span.pin{
            background:url("/site_images/folder_arrow.png") left no-repeat;
            width:10px;
            height: 10px;
            display: inline-block;
            z-index: 1;
            }   

我基本上只想在您使用通讯员时显示 .delete_file 范围 <li>问题是，当我越过其他跨度(在 li 中)时，鼠标被算作不在“li 上”，因此 span.delete_file 淡出并连续淡入，出于同样的原因，它也直接在 span 上消失。 delete_file 所以我不能点击它。 我知道它与 CSS 有关，但我想不出任何东西，我仍然在 li 上，所以为什么认为我不是？

Answer 1

要补充 Marlin 所说的内容，您可以尝试使用 .delegate()相反。

$('ul').delegate('li.dir, li.file', {
    mouseenter: function() {
        $(this).find('span.delete_file').stop(true,true).delay(800).fadeIn('fast');
    },
    mouseleave: function() {
        $(this).find('span.delete_file').stop(true,true).fadeOut('fast');
    }
});

为什么mouseenter的原因而不是 mouseover推荐是因为前一个事件在您进入所选元素的边界时触发，而后者在您进入所选元素的子元素时也会触发(多次触发)。有一个good demo在 jQuery API 上说明这种差异。

我还推荐使用 .stop(true, true)停止 fadeIn()或 fadeOut()动画队列，否则当用户快速连续进入和离开所选元素时，他/她将导致动画队列建立起来(<span class="delete_file'></span> 元素闪烁)。

我做了一个简短的演示:http://jsfiddle.net/QGqmD/