jquery悬停问题

这是密码

        //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

我基本上只想当你在相应的

上时才显示.delete_文件span。问题是，当我通过其他span（在li中）时，鼠标被算作“在li上”，因此span.delete_文件会淡出并持续淡入，出于同样的原因，它也会直接在span.delete_文件上消失，因此我无法单击它。

---

我知道这与CSS有关，但我想不出任何东西，我仍在学习中，所以为什么会认为我不是呢？

你的问题是你的听众。”“mouseover”和“mouseout”在子元素悬停时冒泡，因此您的fadeIn方法会不断被调用。将它们改为“mouseenter”和“mouseleave”

这个jquery文档页面上的演示准确地描述了发生在您身上的事情。

---

我还建议使用.delegate（）代替.live（），使用“hover”代替事件列表

要补充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

，是因为前者事件在您输入选定元素的边界时触发，后者也在您输入选定元素的子元素时触发（多个触发器）。有一个关于jQueryAPI的例子来说明这种差异

我还建议使用

.stop（true，true）

停止

fadeIn（）

或

fadeOut（）

动画队列，否则当用户连续快速进入和离开所选元素时，他/她将导致动画队列建立（闪烁

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;
            }   

$('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');
    }
});