jqueryのホバー問題

Question

これは、私は基本的にしたいあなたは通信員にしている場合にのみ、.delete_fileスパンを示し、コード

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

ある<li>問題は、私が他のスパン（里の中）を通過するとき、マウスは "里の上"ではないとカウントされるので、span.delete_fi leはフェードアウトして連続的にフェードインします。同じ理由で、それはまた、直接、span.delete_file上に消えるので、私はそれをクリックすることはできません。 CSSが付いていることは分かっていますが、私は何も考えることができません。私はまだリの上にいるので、なぜ私はそうではないと考えられますか？

Answer 1

のリストの「ホバー」の、あなたの代わりに.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があります。

私はまたfadeIn()または​​アニメーションキューを停止する.stop(true, true)を使用することをお勧め、または他のユーザーが入力すると矢継ぎ早で選択された要素から離れたとき、彼/彼女が（<span class="delete_file'></span>要素のちらつきを構築するために、アニメーションキューの原因となります）。

短いデモを作成しました：http://jsfiddle.net/QGqmD/

Answer 2

あなたの問題はリスナーです。あなたのfadeInメソッドが呼び出され続けるように、子要素が上にホバーされているときはいつでも 'mouseover'と 'mouseout'のバブルが起きます。 'mouseenter'と 'mouseleave'に変更してください

このjqueryドキュメントのデモでは、何が起こっているのかを正確に示しています。 http://api.jquery.com/mouseover/

私も.delegateを使用することをお勧めし（）の代わりに（.live）、代わりにマーリンが言ったことにに追加するには、イベント