Question

I have a simple question for you.

I need to implement the list of images that will show description cloud above when you hover them.

This is what I’ve done so far:

<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>

this is my markup:

<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>

Now, what I need to know is how to display a specific .cloud when I hover on its li parent.

I tried something with child() and other options but didn’t get anywhere.

Can you please provide me with some solutions? Thank you

Answer 1

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

EDIT:

you can delegate the mouseenter event to the parent like

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

DEMO