CSS卡片翻转失效求助：hover无反应、移除hover自动翻转

架构老林

2026-8-14

解决React中CSS卡片3D翻转失效问题

问题根源

你的代码里.summary设置了z-index: -1，这会让整个卡片容器处于页面最底层，完全接收不到鼠标的hover事件——鼠标事件会被上层的默认元素（比如body）拦截，所以你写的.box__inner:hover根本不会触发。而移除hover时出现的异常翻转，也是因为这个z-index导致元素交互状态混乱。

修复步骤

调整.summary的z-index
删掉.summary里的z-index: -1，或者设置为正数（比如z-index: 1），让卡片容器能正常接收鼠标事件。
优化hover触发逻辑
把hover事件绑定到.boxes容器上（它是设置了perspective的透视容器），再控制内部.box__inner的翻转，这样用户hover整个卡片区域都能触发效果，比直接hover.box__inner更稳定。

修改后的CSS代码

.summary{
    position: relative;
    height: 100vh;
    /* 移除z-index: -1，或改为z-index: 1 */
}
.body__image{
    height: 100vh;
}
.box__container{
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
}
.boxes{
    height: 320px;
    width: 300px;
    margin: 0px 10px 0px 10px;
    position: relative;
    background-color: rgba(107,186,167,0.7);
    perspective: 1000px;
    overflow: hidden;
}
.box__inner{
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: all 0.8s ease;
    transform-style: preserve-3d;
}
.boxes__pics{
    height: 100%;
    width: 100%;
    opacity: 0.7;
}
/* 绑定hover到.boxes，控制内部.box__inner翻转 */
.boxes:hover .box__inner{
    cursor: pointer;
    transform: rotateY(180deg);
}
.box__front, .box__back{
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
} 
.box__back{
    transform: rotateY(180deg);
}