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的懸停問題

回答

相關問題