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

你的问题是你的听众。 'mouseover'和'mouseout'冒泡任何时候子元素都悬停在上面，这样你的fadeIn方法就会被调用。将它们改为'mouseenter'和'mouseleave'

此jquery文档页面上的Demo描述了您正在发生的事情。 http://api.jquery.com/mouseover/

我还建议使用.delegate（）代替.live（）和'hover'而不是事件列表

Answer 2

要添加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的原因是因为前一个事件在您输入所选元素的边界时触发，而后一个事件在您输入所选元素的子元素时触发，（多个触发器）。 jQuery API上有good demo来说明这种差异。

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

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

jquery悬停问题

2 个答案: