CSS实现Hover触发指定元素translateX位移的轮播交互问题

现有代码 #

HTML #

<section id="lakeSlider" class="carousel vcenter-item py-5">
    <div>
        <div class="carousel__container">
            <div class="carousel-item carousel-index1">
                <div class="card">
                    <img class="carousel-item__img img-fluid" src="./assets/images/cards/oserenfloatingcardimageindex2.png" alt="" />
                    <div class="card-body pb-0">
                        <h5 class="text-center card-title">Mila Hubert</h5>
                        <p class="card-text text-center">Sales Manager</p>
                    </div>
                </div>
            </div>
            <div class="carousel-item carousel-index2">
                <div class="card">
                    <img class="carousel-item__img img-fluid" src="./assets/images/cards/oserenfloatingcardimageindex2.png" alt="" />
                    <div class="card-body pb-0">
                        <h5 class="text-center card-title">Boris Komnenov</h5>
                        <p class="card-text text-center">Marketing Manager</p>
                    </div>
                </div>
            </div>
            <div class="carousel-item carousel-index3">
                <div class="card">
                    <img class="carousel-item__img img-fluid" src="./assets/images/cards/oserenfloatingcardimage.png" alt="" />
                    <div class="card-body pb-0">
                        <h5 class="text-center card-title">Joshua Rubens</h5>
                        <p class="card-text text-center">CEO</p>
                        <div class="cardbodydownarrow text-center m-0 p-0"><img src="./assets/images/icon/oserendownarrowpix.png" alt=""></div>
                    </div>
                </div>
            </div>
            <div class="carousel-item carousel-index4">
                <div class="card">
                    <img class="carousel-item__img img-fluid" src="./assets/images/cards/oserenfloatingcardimageindex2.png" alt="" />
                    <div class="card-body pb-0">
                        <h5 class="text-center card-title">Anna Jimenez</h5>
                        <p class="card-text text-center">Product Designer</p>
                    </div>
                </div>
            </div>
            <div class="carousel-item carousel-index5">
                <div class="card">
                    <img class="carousel-item__img img-fluid" src="./assets/images/cards/oserenfloatingcardimageindex2.png" alt="" />
                    <div class="card-body pb-0">
                        <h5 class="text-center card-title">Ben Hubert</h5>
                        <p class="card-text text-center">Programmer</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

CSS #

/* lakeSlider */

#lakeSlider .carousel {
    width: 100%;
    padding: 30px;
    padding-top: 80px;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#lakeSlider .carousel__container {
    margin: 70px 0px;
    padding-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

#lakeSlider .categories__title {
    color: rgb(77, 55, 102);
    font-size: 28px;
    position: absolute;
    padding-left: 30px;
}

#lakeSlider .carousel-item {
    width: 280px;
    margin: 50px 5px;
    overflow: hidden;
    display: inline-block;
    cursor: pointer;
    -webkit-transition: 1000ms all;
    transition: 1000ms all;
}

#lakeSlider .carousel-index1, #lakeSlider .carousel-index2 {
    -webkit-transform-origin: center left;
    transform-origin: center left;
}

#lakeSlider .carousel-index4, #lakeSlider .carousel-index5 {
    -webkit-transform-origin: center right;
    transform-origin: center right;
}

#lakeSlider .carousel-index3 {
    -webkit-transform-origin: center center;
    transform-origin: center center;
}

@media (min-width:960px) {
    #lakeSlider .carousel-item:hover~.carousel-item {
        -webkit-transform: translate3d(100px, 0, 0);
        transform: translate3d(100px, 0, 0);
    }

    #lakeSlider .carousel__container:hover .carousel-item {
        opacity: 0.3;
    }
}

@media (min-width:960px) {
    #lakeSlider .carousel__container:hover .carousel-item:hover {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
        opacity: 1;
    }
}

@media (max-width:960px) {
    #lakeSlider .carousel__container:hover .carousel-item:hover {
        opacity: 1;
    }
}

#lakeSlider .card-body {
    background-color: #2699FB;
    color: white;
}

#lakeSlider .card-body h5 {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

#lakeSlider .card-body p {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 100;
}

当前效果 #

当hover任意卡片时，该卡片右侧的所有元素会向右移动100px。

需求效果 #

• 当hover左侧前两个元素（第1、2个）时，所有右侧元素向右移动100px；
• 当hover中间元素（第3个）时，前两个元素向左移动100px，后两个元素向右移动100px；
• 当hover右侧后两个元素（第4、5个）时，所有左侧元素向左移动100px。

尝试过的无效代码 #

@media (min-width:960px) {
    #lakeSlider .carousel-index4:hover~.carousel-index1 {
        -webkit-transform: translate3d(100px, 0, 0);
        transform: translate3d(100px, 0, 0);
    }
}

解决方案 #

问题核心在于CSS的通用兄弟选择器(~)只能选中当前元素之后的兄弟元素，无法选中之前的。要实现选中前面的元素，可使用CSS的:has()选择器（目前主流浏览器已支持），通过父容器判断子元素的hover状态，进而控制其他子元素的样式。

替换原有媒体查询中的交互代码，使用以下CSS：

@media (min-width:960px) {
    /* 基础状态：容器hover时所有非hover元素透明度降低 */
    #lakeSlider .carousel__container:hover .carousel-item {
        opacity: 0.3;
    }
    /* hover元素本身放大且不透明 */
    #lakeSlider .carousel__container:hover .carousel-item:hover {
        transform: scale(1.3);
        opacity: 1;
    }

    /* 1. hover第1/2个元素时，右侧所有元素右移 */
    #lakeSlider .carousel__container:has(.carousel-index1:hover) .carousel-item:nth-child(n+2),
    #lakeSlider .carousel__container:has(.carousel-index2:hover) .carousel-item:nth-child(n+3) {
        transform: translate3d(100px, 0, 0);
    }

    /* 2. hover中间元素时，前两个左移，后两个右移 */
    #lakeSlider .carousel__container:has(.carousel-index3:hover) .carousel-item:nth-child(-n+2) {
        transform: translate3d(-100px, 0, 0);
    }
    #lakeSlider .carousel__container:has(.carousel-index3:hover) .carousel-item:nth-child(n+4) {
        transform: translate3d(100px, 0, 0);
    }

    /* 3. hover第4/5个元素时，左侧所有元素左移 */
    #lakeSlider .carousel__container:has(.carousel-index4:hover) .carousel-item:nth-child(-n+3),
    #lakeSlider .carousel__container:has(.carousel-index5:hover) .carousel-item:nth-child(-n+4) {
        transform: translate3d(-100px, 0, 0);
    }
}

说明 #

• :has(.carousel-index1:hover) 表示当父容器中包含hover状态的.carousel-index1元素时，应用后续样式；
• nth-child(n+2) 选中第2个及之后的元素，nth-child(-n+2) 选中第2个及之前的元素，精准控制需要移动的元素范围；
• 保留原有过渡动画，确保交互过程平滑。

内容的提问来源于stack exchange，提问作者MoKDiab