切换列表jquery上的一个项目

Question

我想要的是当一个列表项悬停时，切换一个div项但只是在该列表项中。

$("#posts li").hover(function(){
        $(".right").toggle("fast");

    });

我做了这个但它切换了所有列表项中的div并且不是我想要的。我怎么能实现这个目标？谢谢

修改HTML：

<ol id="posts">
   <li class="post text">
      <div class="right"></div>

   </li>
   <li class="post photo">
      <div class="right"></div>

   </li>
</ol>

Answer 1

Tadaaaaa：

 $("#posts li").hover(function(){
      $(this).find(".right").toggle("fast");
   });

通过使用此选项，您可以选择当前悬停的li，将搜索范围限制为仅在相应li中包含.right的div。

Answer 2

您可以将上下文限制为此列表项：

$("#posts li").hover(function(){
        $(".right", this).toggle("fast");

    });

Answer 3

您只能使用css：

#posts li .right { display:none; }
#posts li:hover .right { display:block; }