JQuery fadeOut operation

Question

i am having a html structure like

<ul>
 <li>   <span class="vcard">
            <a class="underline user-link" href="/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="/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>

I tried a code in jQuery as when we hover on the link inside the span(vcard) the div next to that to fadeIn

And when on hover on other elements of the body other than the link or the div which fades on , the div has to fade Out ..

How to do so ??

The one i tried to fade In s

     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

I need to write some conditions inside the _bodyMouseOverFunction but dont know how to specify .. Please give suggestions

Answer 1

You can write .mouseleave() event on li instead of _bodyMouseOverFunction function, e.g.

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

whenever user moves out either of link of content div, content div will hide automatically.

working demo