影响单独div的过渡

Question

我正在尝试创建一个前端屏幕，其中有标记为步骤1-4的图像彼此相邻，其想法是，如果用户将鼠标悬停在这些步骤之一上，在他们下面的div上，相关和相应的图像应该淡入，当他们移除光标或将其移动到另一个步骤时，图像应该淡出或分别由另一个图像替换。到目前为止，我已经能够添加代码，让步骤1-4的图像被它们正确的图像替换，但我对如何在完全不同的div上实现过渡效果感到困惑。我使用的代码(HTML和CSS)包括在下面。

HTML：

    <div class="col-md-3">
        <div class="swap-1" id="step1">
            <a>
                <img src="~/images/step1-cover.png" />
            </a>
        </div>
    </div>

    <div class="col-md-3">

        <div class="swap-2" id="step2">
            <a>
                <img src="~/images/step2-cover.png" />
            </a>
        </div>
    </div>

    <div class="col-md-3">
        <div class="swap-3" id="step3">
            <a>
                <img src="~/images/step3-cover.png" />
            </a>
        </div>
    </div>

    <div class="col-md-3">
        <div class="swap-4" id="step4">
            <a>
                <img src="~/images/step4-cover.png" />
            </a>
        </div>
    </div>

        @*the div below is where the corresponding images should appear*@
    <div id="steps" class="steps" style="height:300px; width:1000px; 
    margin-bottom:30px; margin-top:100px"></div>

CSS：

    .swap-1 {
        background-image: url(../images/step1.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 300px;
    }

    .swap-1 a {
        display: block;
    }

    .swap-1 a img {
        opacity: 1;
        width: 300px;
        height: auto;
        display: block;
        transition: all .6s ease-in;
    }

    .swap-1 a:hover img {
        opacity: 0;
        transition: all .6s ease-in;
    }

    .swap-2 {
        background-image: url(../images/step2.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 300px;
    }

    .swap-2 a {
        display: block;
    }

    .swap-2 a img {
        opacity: 1;
        width: 300px;
        height: auto;
        display: block;
        transition: all .6s ease-in;
    }

    .swap-2 a:hover img {
        opacity: 0;
        transition: all .6s ease-in;
    }

    .swap-3 {
        background-image: url(../images/step3.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 300px;
    }

    .swap-3 a {
        display: block;
    }

    .swap-3 a img {
        opacity: 1;
        width: 300px;
        height: auto;
        display: block;
        transition: all .6s ease-in;
    }

    .swap-3 a:hover img {
        opacity: 0;
        transition: all .6s ease-in;
    }

    .swap-4 {
        background-image: url(../images/step4.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 300px;
    }

    .swap-4 a {
        display: block;
    }

    .swap-4 a img {
        opacity: 1;
        width: 300px;
        height: auto;
        display: block;
        transition: all .6s ease-in;
    }

    .swap-4 a:hover 

img {
    opacity: 0;
    transition: all .6s ease-in;
}

Answer 1

如果你不局限于特定的HTML，你可以用更简单的方式来做…

只需将每个“幻灯片”(.image)放在它的“tab”(.step)旁边，您就可以使用'+‘(下一个元素)选择器使用CSS访问它，如下所示：

.step:hover + .image{ /* active slide css here */ }

请检查小提琴中的代码：https://jsfiddle.net/ck0bqy1h/