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，你可以更简单地做到这一点...... 只需将每个'slide'（。image）放在它的'tab'（.step）旁边，你就可以使用'+'（下一个元素）选择器用CSS访问它，如：

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

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

过渡影响单独的div

1 个答案: