Javascript 从父div内的左隐藏div滑入（具有相同类的多个div’；s）

所以，我有多个div和多个隐藏div。我想显示每个div都处于链接悬停状态

我的问题是，代码似乎一次显示和隐藏所有隐藏的div。我只想在触发悬停的链接的父级中显示隐藏的div

似乎有点不好的解释，让我这么说吧。假设有10个div，有人在div 1中悬停链接，我只想显示div 1中隐藏的div

这是我的密码

<div class="col-md-3 col-sm-6 posts">
  <div class="div-hidden"> 

    <!-- hidden content here --> 

  </div>
  <span class="thumbnail text-center"> <img src="imge" alt="">
  <h3>Titile</h3>
  <h4>Description</h4>
  <hr class="line">
  <div class="row">
    <div class="col-md-6 col-sm-6"> <a href="" class="fa fa-heart-o"></a> </div>
    <div class="col-md-6 col-sm-6"> <a href="" class="fa fa-eye show-hidden"></a> </div>
  </div>
  </span> </div>

<Script>        
   $(function() {
    $('.div-hidden').hide();
    $('.show-hidden').hover(function() {

    $('.div-hidden').show("slide", { direction: "left" }, 400); 

    });

    $('.show-hidden').mouseout(function() { 

    $('.div-hidden').hide("slide", { direction: "left" }, 400); 

    });

});     
</script>

感谢你的时间和投入。

你可以用这个

$(this).closest('div.posts')
        .find('.div-hidden').show("slide", { direction: "left" }, 400);

或

你可以用这个

$(this).closest('div.posts')
        .find('.div-hidden').show("slide", { direction: "left" }, 400);

或

---

首先，为什么在悬停时所有div都会同时隐藏？我假设每个div都有相同的标识符

。div hidden

。选择此类时，始终会选择具有此类属性的所有div。为什么不用一个id为

的唯一标识符标识每个div，然后在悬停状态下隐藏/显示它们？触发悬停的链接的父链接有一个唯一的标识符，可以使用CSS选择器查询？
首先，为什么悬停时所有div都会同时隐藏？我假设每个div都有相同的标识符
。div hidden
。选择此类时，始终会选择具有此类属性的所有div。为什么不用一个id为
的唯一标识符标识每个div，然后在悬停状态下隐藏/显示它们？触发悬停的链接的父项有一个唯一的标识符，可通过CSS选择器查询？
请提供要用于显示隐藏div的链接的html。您应该详细说明如何尝试使用
$（this）
，以及到底发生了什么。（因为您似乎确实需要
this
来只对悬停的元素应用效果，而不是像您当前的代码那样，对类为
div hidden
的每个元素应用效果。）@doldt我将其用作
$（this）。（'.div hidden'）.show（“幻灯片”，“方向：{left”}，400）@TalhaAbrar链接位于代码
中。请提供要用于显示隐藏div的链接的html。您应该详细说明如何尝试使用
$（此）
，以及具体发生了什么。（因为您似乎确实需要
this
来只对悬停的元素应用效果，而不是像您当前的代码那样，对类为
div hidden
的每个元素应用效果。）@doldt我将其用作
$（this）。（'.div hidden'）.show（“幻灯片”，“方向：{left”}，400）@TalhaAbrar链接位于代码

$(this).parents('.posts').find('.div-hidden').show();

$(this).parents('.posts').find('.div-hidden').show();