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>

班级＆＃34; vis＆＃34;是没有点击它们的可见圆圈。

班级＆＃34; invis-wrapper＆＃34;是点击后应该可见的类。

我已尝试使用此代码：

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

现在这样做，显示了每个圈子的所有细节。这不是我想要的。

但我似乎并没有找到如何选择班级＆＃34; invis-wrapper＆＃34;从我点击的圆圈。所以我认为我需要的是选择父（class = pakket），然后选择那个孩子（class =＆＃34; invis-wrapper＆＃34;）。但我似乎无法找到如何做到这一点。

编辑：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);
});

将鼠标悬停在显示子项目和动画其他项目的项目上时

1 个答案: