JQuery fadeOut opération

Question

j'ai une structure html comme

<ul> 
<li> <span class="vcard"> 
      <a class="underline user-link" href="https://stackoverflow.com/users/aruna">Aruna </a> 
     </span> 
     <div style="display: none;" class="image_hover"> 
      Student 
      <p> 
      <a onclick="" href="#">Show additional details</a> 
      <a href="#">view</a> 
      <p>Employee ID : </p> 
      <p>Project Name: </p> 
      <p>Project Role : r</p> 
      <p>Supervisor Name : </p> 
      </p> 
    </div> 
</li> 
<li> 
     <span class="vcard"> 
     <a class="underline user-link" href="https://stackoverflow.com/users/jasmine">jasmine </a> 
     </span> 
     <div style="display: none;" class="image_hover"> 
      Professor 
      <p> 
      <a onclick="" href="#">Show additional details</a> 
      <a href="#">view</a> 
      <p>Employee ID : </p> 
      <p>Project Name: </p> 
      <p>Project Role : r</p> 
      <p>Supervisor Name : </p> 
      </p> 
    </div> 
</li> 

</ul> 

J'ai essayé un code jQuery lorsque vous passez la souris sur le lien dans la durée (vcard) la div à côté de celle de fadeIn

Et quand il plane sur d'autres éléments du corps que le lien ou le div qui s'estompe, le div doit disparaître.

Comment faire?

celui que j'ai essayé de disparaître dans l

 jQuery(document).ready(function(){ 
     var _selectedLinkEl = null; 
     var _detailEl = null; 
     var body = jQuery("body"); 
     var elem=null; 

     jQuery(".user-link").mouseover(function(event) { 
       _selectedLinkEl = this; 
       _detailEl=jQuery(event.target).parent().next(); 
       _detailEl.fadeIn("slow"); 
       elem=jQuery(this).parent().next(); 
       _href=jQuery(this).attr('href').split("/")[2]; 

       jQuery.post('/users/user_detail/?name='+_href, 
       function(data){ 

          elem.html(data).fadeIn("slow"); 
       });//post 

      body.mouseover(_bodyMouseOverFunction); 
    }); // user-link 

     var _bodyMouseOverFunction = function(event) { 

      // to add some conditions here 

      _detailEl.fadeOut("slow"); 
      body.unbind("mouseover", _bodyMouseOverFunction); 



      };// mouseover 

     });// doc ready 

Je dois écrire quelques conditions à l'intérieur du _bodyMouseOverFunction mais ne sais pas comment spécifier .. S'il vous plaît donner des suggestions

Answer 1

Vous pouvez écrire .mouseleave() événement li au lieu de _bodyMouseOverFunction, par exemple

jQuery("li").mouseleave(function(e1){ 
    jQuery("div",jQuery(this)).fadeOut("slow");   
}); // user-link 

chaque fois que l'utilisateur se déplace sur l'une des div lien de contenu, div contenu cachera automatiquement.

working demo