javascript - 将鼠标悬停在显示子项的项目上并对其他项目进行动画处理时

Question

我有 5 个圆圈，里面有一张图片。单击图片后，我想显示该图片的详细信息，但仅显示该图片的详细信息，而不显示其他图片的详细信息。其他的应该是动画的，因为细节干部相当大并且覆盖了其他圆圈。那么应该发生什么呢？所有圆圈都应向中间(彼此下方)设置动画，并且已单击的圆圈应位于顶部。如果这是不可能的，我希望它们淡入中间。还有一个按钮，返回以再次显示所有圈子。

这是我的html:

<section class="pakketten">
            <header>
                <h1>Pakketten</h1>
            </header>
            <button class="back">back</button>
            <div class="pakket">
                <div class="vis">
                    <div class="circle">
                        <img src="_img/jets.png" width="71" height="107" alt="jets" name="jets">
                    </div>
                </div>
                <div class="invis-wrapper">
                    <div class="invis">
                        <h2>Jets</h2>
                        <p>Een « jet pack », deze jets kun je aansluiten op jouw voertuig. Door de kleine boost spring je als ware in de lucht voor een korte tijd en kun je langs een heleboel obstakels geraken, ook kan het gebruikt worden om coole tricks uit te voeren.</p>
                    </div>
                </div>
            </div>
            <div class="pakket">
                <div class="vis">
                    <div class="circle">
                        <img src="_img/jets.png" width="71" height="107" alt="jets" name="jets">
                    </div>
                </div>
                <div class="invis-wrapper">
                    <div class="invis">
                        <h2>Jets</h2>
                        <p>Een « jet pack », deze jets kun je aansluiten op jouw voertuig. Door de kleine boost spring je als ware in de lucht voor een korte tijd en kun je langs een heleboel obstakels geraken, ook kan het gebruikt worden om coole tricks uit te voeren.</p>
                    </div>
                </div>
            </div>
            <div class="pakket">
                <div class="vis">
                    <div class="circle">
                        <img src="_img/jets.png" width="71" height="107" alt="jets" name="jets">
                    </div>
                </div>
                <div class="invis-wrapper">
                    <div class="invis">
                        <h2>Jets</h2>
                        <p>Een « jet pack », deze jets kun je aansluiten op jouw voertuig. Door de kleine boost spring je als ware in de lucht voor een korte tijd en kun je langs een heleboel obstakels geraken, ook kan het gebruikt worden om coole tricks uit te voeren.</p>
                    </div>
                </div>
            </div>
            <div class="pakket">
                <div class="vis">
                    <div class="circle">
                        <img src="_img/jets.png" width="71" height="107" alt="jets" name="jets">
                    </div>
                </div>
                <div class="invis-wrapper">
                    <div class="invis">
                        <h2>Jets</h2>
                        <p>Een « jet pack », deze jets kun je aansluiten op jouw voertuig. Door de kleine boost spring je als ware in de lucht voor een korte tijd en kun je langs een heleboel obstakels geraken, ook kan het gebruikt worden om coole tricks uit te voeren.</p>
                    </div>
                </div>
            </div>
            <div class="pakket">
                <div class="vis">
                    <div class="circle">
                        <img src="_img/jets.png" width="71" height="107" alt="jets" name="jets">
                    </div>
                </div>
                <div class="invis-wrapper">
                    <div class="invis">
                        <h2>Jets</h2>
                        <p>Een « jet pack », deze jets kun je aansluiten op jouw voertuig. Door de kleine boost spring je als ware in de lucht voor een korte tijd en kun je langs een heleboel obstakels geraken, ook kan het gebruikt worden om coole tricks uit te voeren.</p>
                    </div>
                </div>
            </div>
        </section>

“vis”类是无需单击即 cocoa 见的圆圈。

“invis-wrapper”类是单击后应该可见的类。

我已经使用此代码尝试过:

$(".vis").click(function() {
    $(".invis-wrapper").fadeToggle(1000);
});
$(".back").click(function() {
    $(".invis-wrapper").fadeToggle(1000);
});

现在它的作用是显示每个圆圈的所有细节。这不是我想要的。

但我似乎没有找到如何从我单击的圆圈中选择“invis-wrapper”类。所以我认为我需要的是选择父级(class = pakket)，然后选择其子级(class =“invis-wrapper”)。但我似乎不知道如何做到这一点。

编辑:添加 CSS

.pakketten {

    margin: 0 auto;
    width: 800px;

    header {
        width: 462px;
        height: 86px;
        background-image: url(../_img/pakh.png);
        margin: 0 auto;
        margin-bottom: 100px;
        font-size: 1.8em;

        h1 {
            color: $red;
        }
    }
}

.pakket {
    float: left;
    margin-right: 20px;

    &:last-child {
        margin-right: 0px;
    }
}

.circle {
    width: 144px;
    height: 144px;
    background-image: url(../_img/pakcircle.png);

    img {
        margin-left: 30px;
        margin-top: 18px;
    }
}

.invis-wrapper {

    position: absolute;
    margin-top: -162px;
    margin-left: -60px;
    display: none;

    h2 {
        font-family: "Prohibition-Lines";
        color: $red;
        margin-top: 180px;
        margin-bottom: 25px;
    }

    p {
        width: 200px;
        text-align: center;
        margin: 0 auto;
        font-family: "Lora";
        color: $green;
        font-size: 1.2em;
    }

}

.invis {
    position: absolute;
    width: 266px;
    height: 384px;
    background-image: url(../_img/pakbg.png);
}

.back {
    position: absolute;
    margin-top: -100px;
}

Answer 1

我想这就是你想要的。

当您单击图像 (.vis) 时，仅选择 siblings被点击元素的。

当您单击后退按钮时，仅使用 visible selector 在可见元素上 fadeToggle .

$(".vis").click(function () {
    $(this).siblings(".invis-wrapper").fadeToggle(1000);
});
$(".back").click(function () {
    $(".invis-wrapper:visible").fadeToggle(1000);
});