Показать только облачный 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:

вы можете делегировать mouseenter событие родителю как

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

DEMO

Answer 2

Я полагал, что вы, возможно, придется скрыть описание на мышь- из <a> теги.

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

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