problème de vol stationnaire jquery

Question

c'est le code

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

Je fondamentalement veux montrer la durée .delete_file que lorsque vous êtes sur le correspondant <li> le problème est que quand je passe sur les autres travées (dans le li) la souris est comptée comme n'étant pas "sur le li" donc le span.delete_fi Le fondu disparaît et disparaît continuellement, pour la même raison il disparaît aussi directement sur span.delete_file donc je ne peux pas cliquer dessus. Je sais qu'il doit avec CSS mais je ne peux pas penser à n'importe quoi, je suis toujours au-dessus de la li pourquoi est-il considéré que je ne suis pas?

Answer 1

Pour ajouter à ce que Marlin a dit, vous pouvez essayer d'utiliser à la place .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'); 
    } 
}); 

La raison pour laquelle mouseenter au lieu de mouseover est recommandé parce que les anciens événement se déclenche lorsque vous entrez dans la limite de l'élément sélectionné, alors que celui-ci se déclenche lorsque vous entrez l'enfant de l'élément sélectionné aussi (plusieurs déclencheurs). Il y a un good demo sur l'API jQuery pour illustrer cette différence.

Je recommande également d'utiliser .stop(true, true) pour arrêter la file d'attente d'animation fadeIn() ou fadeOut(), ou bien lorsqu'un utilisateur entre et sort l'élément sélectionné en succession rapide, il/elle fera la file d'attente d'animation pour construire (vacillante de l'élément <span class="delete_file'></span>).

J'ai fait une courte démo: http://jsfiddle.net/QGqmD/

Answer 2

Votre problème est votre auditeurs. souris 'mouseover' et 'mouseout' chaque fois qu'un élément enfant est survolé afin que votre méthode fadeIn continue d'être appelée. Changez-les pour 'mouseenter' et 'mouseleave'

La démo sur cette page de documentation de jquery dépeint exactement ce qui vous arrive. http://api.jquery.com/mouseover/

Je suggère également d'utiliser .delegate() au lieu de .live() et « vol stationnaire » au lieu d'une liste d'événements