多个div上的Javascript覆盖

我用Javascript创建的覆盖遇到了一些问题。我用三个团队成员做了一个页面。每当您将鼠标悬停在团队成员上方时，就会显示一个带有LinkedIn图像和他们姓名的覆盖图，链接到他们的LinkedIn个人资料

我想要实现的是，每当我将鼠标悬停在teammember 1上时，只有teammember 1获得覆盖。现在发生的是，每当我将鼠标悬停在任何团队成员上时，覆盖显示在所有三个团队成员上，而不是在单个团队成员上

非常感谢您的帮助

覆盖的脚本是：

$(document).ready(function() {
    // wanneer ik over .photo hover start de functie
    $('.person_up').hover(function() {
        // geef overlay weer
        $('.overlay').show();
        // animeer .overlay naar bottom: 0 en stop wanneer hover event verdwijnt (voorkomt dat het event afgemaakt moet worden)
        $('.overlay').stop().animate({bottom: '0'});

    },
    // als hover weg is dan deze functie
    function() {
        // .overlay weer op z'n oude plek
        $('.overlay').stop().animate({bottom: '-340'});
    });
});

我的页面上的代码是：

<div id="team-images">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <div class="team_person_wrapper">
                    <div class="person_up">
                        <img src="person1.jpg" alt="name person 1"></img>
                        <div class="overlay">   <a href="person1.html" target="_blank">
        <img src="Linkedin.png" alt="linkedin icon">
    <h3>Person 1 </h3>     </a>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="team_person_wrapper">
                    <div class="person_up">
                        <img src="person2.jpg" alt="name person 2"></img>
                        <div class="overlay">   <a href="person2.html" target="_blank">
        <img src="Linkedin.png" alt="linkedin icon">
    <h3>Person 2 </h3> </a>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="team_person_wrapper">
                    <div class="person_up">
                        <img src="person3.jpg" alt="name person 3"></img>
                        <div class="overlay">   <a href="person3.html" target="_blank">
        <img src="Linkedin.png" alt="linkedin icon">
    <h3>Person 3 </h3> </a>
                    </div>
                </div>
            </div>
        </div>

试试这个：

$(document).ready(function() {
    // wanneer ik over .photo hover start de functie
    $('.person_up').hover(function() {
        // geef overlay weer
        $(this).find( "div" ).show();
        // animeer .overlay naar bottom: 0 en stop wanneer hover event verdwijnt (voorkomt dat het event afgemaakt moet worden)
        $(this).find( "div" ).stop().animate({bottom: '0'});
    },
    // als hover weg is dan deze functie
    function() {
        // .overlay weer op z'n oude plek
        $(this).find( "div" ).stop().animate({bottom: '-340'});
    });
});

---

您可以尝试使用

this

和

find

获取您想要的元素…

我在您的问题中添加了一个演示。请用你的CSS更新它，这样我们就可以看到覆盖图，然后更新你问题中的URL。谢谢这个isherwood！我是新手，所以这就是为什么我一开始没有做JSFIDLE的原因。@Boy，没问题，很高兴我能帮上忙！