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()
          });
     });

编辑：

您可以将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/

仅显示适当元素的云jquery

2 个答案: