0

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

2 Answers 2

2
$(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

1
  • I will consider this also. You are very kind :) Jan 21, 2012 at 14:01
1

I believed that You might have to hide the description on mouse-out of <a> tags.

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.