Question

我遇到了一些我在Javascript中创建的叠加层问题。我和三个队员做了一个页面。每当您将鼠标悬停在团队成员上时，叠加层会显示LinkedIn图像及其名称，这些图像链接到他们的LinkedIn个人资料。

我想要实现的是，每当我将鼠标悬停在团队成员1上时，只有团队成员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>

Demo

Answer 1

试试这个：

$(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来获取您想要的元素......

Javascript覆盖多个div

1 个答案: