將鼠標懸停在顯示孩子的項目上並為其他項目設置動畫時

Question

我的圖片中有5個圓圈。 單擊圖片后，我要顯示該圖片的詳細信息，但僅顯示有關該1張圖片的詳細信息，而不顯示其他圖片。 由於細節干部相當大並且覆蓋了其他圓圈，因此應該對其他部分進行動畫處理。 那應該怎么辦？ 所有圓圈都應朝中間（彼此下方）移動，並且已單擊的圓圈應位於頂部。 如果無法做到這一點，我希望它們逐漸淡入中間。 還有一個按鈕，可以再次顯示所有圈子。

這是我有的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”類是無需單擊即可看到的圓圈。

類“ invis-wrapper”是單擊后應可見的類。

我已經嘗試使用以下代碼：

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

現在所做的就是顯示每個圓圈的所有細節。 這不是我想要的。

但是我似乎找不到從單擊的圓圈中選擇“ invis-wrapper”類的方法。 因此，我認為我需要選擇父級（類= pakket），然后選擇該子級的子級（類=“ 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 ）時，僅選擇被單擊元素的同級 。

當您單擊“后退”按鈕時，僅使用可見選擇器 fadeToggle可見元素。

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