jquery - 具有相同类的多个 div，所有这些都只有一个 jquery

Question

我的 jQuery 代码有点问题。我有多个具有相同类的 div 我动态生成此 div。 jQuery 非常简单，只需将 div 顶部移动到一个精确的 px 数字，然后在这个 div 的正下方显示另一个 div。

问题是当我将光标移动到 div 上时，我不知道如何选择悬停的 div 并且不同时移动其他 div。

$(document).ready(function(){
	$("h1").hide();
    $(".pin-holder").mouseenter(function(){
    $(".img-frame").animate({bottom: '80px'});
		$(".hidden-title").slideToggle();
		 $("h1").fadeIn(600);
    });
	 $(".pin-holder").mouseleave(function(){
        $(".img-frame").animate({bottom: '-0px'});
		$(".hidden-title").slideToggle();
		$("h1").fadeOut(600);

       });
    });

.pin-holder{
     position:relative;
     display:inline-block;
     margin-left:95px;
     margin-top:50px;
     width:300px;
     height:300px;
     overflow:hidden;/*+opció*/
}
.img-frame{
     display:inline-block;
     position:absolute;
     width:300px;
     height:300px;
}
.hidden-title{
     position:absolute;
     bottom:0;
     width:100%;
     height:80px;
     background-color:red;
     display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='pin-holder'>
    <div class='img-frame'><a href='#'><img src='pins/pic01.png' height='300' width='300'/></a></div>
        <div class='hidden-title'><h1>PLEASE WORK!</h1></div>
    </div>
    <div class='pin-holder'>
        <div class='img-frame' id='frame01'><a href='#'><img src='pins/pic02.png' height='300' width='300'/></div>
        <div class='hidden-title'><h1>PLEASE WORK!</h1></div>
</div>

Answer 1

这是您想要的行为吗？

$(document).ready(function(){
	$("h1").hide();
    $(".pin-holder").mouseenter(function(){
    debugger;
    $(this).animate({bottom: '80px'});
		$(this).find(".hidden-title").slideToggle();
		 $(this).find("h1").fadeIn(600);
    $(this).find('img').hide()
    });
	 $(".pin-holder").mouseleave(function(){
   debugger;
   $(this).find('img').show()
        $(this).animate({bottom: '-0px'});
		$(this).find(".hidden-title").slideToggle();
		$(this).find("h1").fadeOut(600);

       });
    });

.pin-holder{
     position:relative;
     display:inline-block;
     margin-left:95px;
     margin-top:50px;
     width:300px;
     height:300px;
     overflow:hidden;/*+opció*/
}
.img-frame{
     display:inline-block;
     position:absolute;
     width:300px;
     height:300px;
}
.hidden-title{
     position:absolute;
     bottom:0;
     width:100%;
     height:80px;
     background-color:red;
     display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='pin-holder'>
    <div class='img-frame'><a href='#'><img src='pins/pic01.png' height='300' width='300'/></a></div>
        <div class='hidden-title'><h1>PLEASE WORK!</h1></div>
    </div>
    <div class='pin-holder'>
        <div class='img-frame' id='frame01'><a href='#'><img src='pins/pic02.png' height='300' width='300'/></div>
        <div class='hidden-title'><h1>PLEASE WORK!</h1></div>
</div>