Question

所以，我有多个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)。

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

感谢您的时间和意见。

Answer 1

您可以使用此

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

OR

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

从父div中的左隐藏div滑入（具有相同类的多个div）

3 个答案: