从父 div 中的左侧隐藏 div 滑入(具有相同类的多个 div)

Question

所以，我有多个div和多个隐藏的div。我想在链接悬停上显示这个div 中的每一个。

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

似乎有点糟糕的解释，所以让我这样说。假设有 10 个div，有人将链接悬停在div 1 中，我只想在div no 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)，使代码停止工作。

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

感谢您的时间和投入。

Answer 1

你可以使用这个

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

或

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

Answer 2

首先，为什么当您悬停时，所有div 都会立即隐藏？我想每个div都有相同的标识符.div-hidden.选择此类时，始终选择具有此属性的所有div。你为什么不使用带有id的唯一标识符来识别你的每个div，然后在悬停时隐藏/显示它们？ 触发悬停的链接的父级具有使用 CSS 选择器查询的唯一标识符？

Answer 3

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