如果它是悬停元素的子元素，是否可以使 jQuery 仅针对悬停动画的 div？答案

【问题标题】：Is it possible to make jQuery only target div for hover animation if it is a child of the element being hovered over?如果它是悬停元素的子元素，是否可以使 jQuery 仅针对悬停动画的 div？
【发布时间】：2013-11-27 19:14:33
【问题描述】：

好的，我是 Javascript 和 jQuery 的初学者，所以这可能是一个非常简单的问题，但我尝试过研究它，但找不到任何好的答案。

在我的网站上：

http://joeyellisdesign.com/testingspace/JE2

我在我的作品集的“作品”部分有一个翻转，我试图让它只在你将鼠标悬停在单个图像上时出现。

要设置动画，我有以下代码：

jQuery
$(document).ready(function(){
$(".project").hover(function(){
$(".projectdescription").animate({top:'4px'});
},function(){
$(".projectdescription").animate({top:'183.77px'});
});
});

另外，这里是 CSS 和 HTML。

<div class="project">
<a class="workanchor" href="#">
<img src="files/workthumbs/finsons.jpg">
<div class="projectdescription">
<h4>FINSON'S BEARD PRODUCTS</h4>
<p>Packaging and Identity</p>
<img class="plus" src="files/plus.png" width="129" height="129">
</div>
</a>
</div>


.project {
width: 295px;
height: 240px;
margin: 0px 1.25% 7%;
padding: 0px;
float: left;
overflow: hidden;
position: relative;
} 
#workcontainer .project .projectdescription {
background: #FFF;
margin: -4px 0px 0px;
padding: 0px;
width: 100%;
height: 240px;
position: absolute;
top: 183.77px;
} 
#work #workwrapper #workcontainer .project .workanchor .projectdescription .plus {
margin: 30px 0px 0px 83px;
padding: 0px;
height: 129px;
width: 129px;

}

提前感谢您提供我一无所知的任何和所有帮助/和/或信息。 ;)

【问题讨论】：

标签： javascript jquery css animation

【解决方案1】：

试试：

$(".project").hover(function(){
    $(this).find(".projectdescription").animate({top:'4px'});
},function(){
    $(this).find(".projectdescription").animate({top:'183.77px'});
});

【讨论】：

【解决方案2】：

$(".project").on('mouseenter mouseleave', function(e){
     $(".projectdescription", this).animate({top: e.type=='mouseenter' ? '4px' : '183.77px'});
});

FIDDLE

【讨论】：

谢谢！这是完美的，你是我最好的朋友。