Question

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

<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“第一个隐藏内容”时出现当悬停第二个“第一隐藏内容”时，“第二隐藏内容”消失，“第二隐藏内容”

以及列表的其余部分

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

OR

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

Answer 3

您需要向children of current li申请show hide，以便edit instead申请every element课程edit

<强> Live Demo

$(".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过渡以获得一些漂亮而流畅的效果。

jquery盘旋李显示内段？

4 个答案: