jQuery的悬停问题

这是代码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

   <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上”，因此span.delete_fi le淡出并连续淡入，出于同样的原因，它直接在span.delete_file上消失，所以我不能点击它。我知道它必须用CSS，但我想不出任何东西，我仍然过了李，为什么它被认为我不是？

来源

2011-06-28 Sandro Antonucci

要添加到什么马林说列表“悬停”，你可以尝试使用.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()或动画队列，否则当用户进入和离开快速连续所选元素，他/她将导致动画队列建立（在<span class="delete_file'></span>元素的闪烁）。

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

来源

2011-06-28 23:58:34 Terry

你的问题是你的听众。 'mouseover'和'mouseout'bubble随时都会被一个子元素覆盖，所以你的fadeIn方法不断被调用。将它们更改为'mouseenter'和'mouseleave'

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

我也建议使用.delegate（）而不是.live（）和而不是事件

来源

2011-06-28 22:57:47 Marlin

jQuery的悬停问题

回答

相关问题