多个div具有相同的类，并且只有一个jquery用于所有这些

Question

我的jQuery代码有点问题。我有多个具有相同类的div我动态生成这个div。 jQuery非常简单，只需使用精确的px数字移动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

这是你想要的这种行为吗？

＆＃13;

＆＃13;

var pageLen = $('#datasetGrid').DataTable().page.len();

＆＃13;

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

       });
    });

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

要做到这一点，你不需要jquery。相反，您可以通过转换来完成此操作。你只能用几行css来做到这一点。添加以下样式：

＆＃13;

＆＃13;

.img-frame, .hidden-title, h1{
        transition-duration: 1s;
    }
    
    .pin-holder:hover .hidden-title { bottom: 0; }
    .pin-holder:hover h1{ display: block;}
    .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;     
     bottom: -80px;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用this选择器来获取悬停元素。 （在事件函数中使用它）

$(this).find(/*element you want to select here*/)