適切な要素のクラウドjqueryのみを表示

Question

私はあなたに簡単な質問があります。

上記の説明クラウドを表示する画像のリストを実装する必要があります。

これは私がこれまで何をやったかである：

<script type="text/javascript"> 
    $(document).ready(function() { 
    $(".parts li").hover(
      function() { 
     $(this).append($(".cloud")); 
     $(".cloud").css({'display':'block'}); 
    }); 
    $("body").click(
      function() { 
     $(".cloud").css({'display':'none'}); 
      }); 
    }); 
</script> 

これが私のマークアップです：

今

<ul> 
       <li> 
        <a href="http://www.facebook.com"><img src="http://www.markhorrell.com/images/travel-button-random.jpg" alt="part1"/></a> 
        <span class="cloud" style="display:none"> 
         this is so great it worksthis is so great it worksthis is so great it works 
        </span> 
       </li> 
       <li> 
        <a href="http://www.facebook.com"><img src="http://www.markhorrell.com/images/travel-button-random.jpg" alt="part1"/></a> 
        <span class="cloud" style="display:none"> 
         Lorem ipsum 
         <img src="http://www.journalofvision.org/content/10/11/16/F3.small.gif" /> 
        </span> 
       </li> 
</ul> 

、私が知っておくべきことは、ときに私の特定.cloudを表示する方法でありますその父母の上を動く。

私はchild（）と他のオプションで何かを試しましたが、どこにも行きませんでした。

解決策を教えてください。あなたは

Answer 1

$(document).ready(function() { 
    $(".parts li").hover(function() { 
     $(this).find(".cloud").show();   
    }); 
    $("body").click(function() { 
     $(".cloud:visible").hide() 
      }); 
    }); 

EDITありがとう：

あなたは

$(document).ready(function() { 
    $("li").delegate("a","mouseenter",function(){ 
    $(this).parent("li").find(".cloud").show(); 
    }); 
$("body").click(
      function() { 
       $(".cloud:visible").hide(); 
      }); 
    }); 

DEMO

Answer 2

のように親にmouseenterイベントを委任することができ、私はあなたがマウス - 上の説明を非表示にするかもしれないと考えられ<a>タグのうち

$("li").delegate("a","mouseover",function(){ 
    $(this).next().show(); 
}).delegate("a","mouseout",function(){ 
    $(this).next().hide(); 
}); 

DEMO：http://jsfiddle.net/RagRd/14/