如何使用JQuery检测鼠标悬停并在动态项目上添加动画

Question

我有一系列的div可以动态加载。 页面加载时会设置ID，并且它们都具有相同的“ pp-post”类。 当用户将鼠标悬停在带有class =“ pp-post”的项目上时，该项目中的'p'项目变为可见。

我想为每个“ p”标记添加可见的动画。

我对JQuery的经验很少，所以我想知道如何检测到悬停了哪个“ pp-post”项并将动画应用于“ p”标签。

至于动画，尚不确定要使用什么，但可以是JQuery动画，也可以使用animations.css并在可见时向p标签添加一个类。

HTML：

<div id="{post_id}" class="pp-post">
     <div id="{post_id}" class="pp-post-item">
             <p id="{post_id}" class="pp-post-title"></p>
             <p id="{post_id}" class="pp-arrow-down"></p>
    </div>
</div>

CSS：

.pp-post-title {  
  visibility: hidden;
}

.pp-arrow-down {  
  visibility: hidden;
}

.pp-post-item:hover > p {
    visibility: visible;
}

Answer 1

如何检测到悬停了哪个“ pp-post”项并将动画应用于“ p”标签

您可以使用$(this)获得悬停的pp-post 。

代码看起来像

$('.pp-post').hover(function(){
    $(this).animate({
        //animation code
    });
});

为了使p标签可见，

$('pp-post').hover(function(){
    $(this).find('p').animate({
        //animation code
    });
});

除了animation功能，您还可以使用某些特定功能，例如fadeIn

样本片段

 $(document).ready(function() { $('.pp-post').hover(function() { $(this).find('p').fadeIn(2000); }); }); 

 .pp-post p { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="pp-post">Hover <p>Sample1</p> </div> <div class="pp-post">Hover <p>Sample1</p> </div> <div class="pp-post">Hover <p>Sample1</p> </div> <div class="pp-post">Hover <p>Sample1</p> </div> <div class="pp-post">Hover <p>Sample1</p> </div>