javascript - jquery悬停li显示段落内？

Question

仅在悬停 LI 时显示段落的简单 jquery 代码

<ol id="sortme">
<li>this content <p class="edit">first hidden content</p></li>
<li>this content <p class="edit">second hidden content</p></li>
<li>this content <p class="edit">third hidden content</p></li>
</ol>

jQuery

$(".edit").hide;
$('#sortme li').hover(
                function () {
                  $(".edit").show();
                },
                function () {
                  $(".edit").hide();
                 }
              );

我的问题是，当悬停任何 li 所有段落出现时，我需要一个接一个地执行，因此当悬停第一个 li 时，“第一个隐藏内容”出现，悬停第二个 li 时，“第一个隐藏内容”消失，“第二个隐藏内容”

等等列表的其余部分

Answer 1

您可以this通过将其作为第二个参数提供到上下文中进行搜索$()：

$(".edit").hide;
$('#sortme li').hover(
    function () {
        $(".edit", this).show();
    },
    function () {
         $(".edit", this).hide();
    }
);

Answer 2

做这个 -

$('#sortme li').hover( function () {
     $(this).find(".edit").show();
   },
   function () {
     $(this).find(".edit").hide();
   });

或者

 $('#sortme li').hover(function () {
   $(this).find(".edit").toggle();
 });

Answer 3

您需要将 show hide 应用到children of currentli 有类edit instead应用到every element有类edit

现场演示

$(".edit").hide;
$('#sortme li').hover(
   function () {
         $(this).find('.edit').show();
    },
    function () {
         $(this).find('.edit').hide();
    }
);

Answer 4

您可以仅使用 CSS 实现相同的效果。 http://jsfiddle.net/LNsaa/

#sortme p {
    display: none;
}

#sortme li:hover > p {
    display: block;
}​

然后，您可以应用 CSS3 过渡以获得一些漂亮和平滑的效果。