Переходы, затрагивающие отдельные div

Question

Я пытаюсь создать интерфейсный экран, в котором рядом с друг другом находятся изображения, помеченные как шаги 1-4, идея заключается в том, что если пользователь наводит курсор на один из этих шагов, то на элементе под ним соответствующий и соответствующий изображение должно исчезнуть, и когда они уберут свой курсор или переместят его на другой шаг, изображение должно исчезнуть или быть заменено другим изображением соответственно. до сих пор я был в состоянии добавить в кодировку, чтобы изображения шагов 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) рядом с его «вкладкой» (.step), и вы можете получить к нему доступ с помощью CSS с помощью селектора «+» (следующий элемент), например:

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

Пожалуйста, проверьте код в скрипте: https://jsfiddle.net/ck0bqy1h/