hover伪类失效求助：鼠标悬停.box元素无响应问题排查

问题描述 #

我为.box元素设置了:hover伪类样式，同时通过body:has(.box:hover)控制.container的样式，但鼠标悬停.box元素时完全无效果。此前在其他小项目中使用:hover伪类均正常，此次却失效；Edge调试器手动启用hover状态时样式正常，但实际鼠标悬停无反应。我尝试调整代码顺序，问题仍未解决。

原始代码 #

CSS代码 #

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    display: grid;
    place-items: center;
    height: 100vh;
    width: 100vw;
}

.container{
    display: grid;
    place-items: center;
    background-color: rgb(43, 42, 42);
    border-radius: 15px;
    padding: 15px;
    width: 245px;
    height: 300px; 
    transition: all 1.2s ease;
    z-index: -1;
}

.box{
    display: grid;
    place-items: center;
    background-color: rgb(53, 53, 53);
    border-radius: 15px;
    padding: 15px;
    width: 232px;
    height: 287px;
    transform: translate(-8px, -8px);
    color: grey;
    transition: all 1s ease;
    z-index: 1;
}

.box:hover{
    color: white;
    border-radius: 15%;
}

body:has(.box:hover) .container{
    border-radius: 15%;
}

HTML代码 #

<div class="container">
    <div class="box">
        <div>
            <h1>Lorem, ipsum.</h1>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate, inventore dicta quasi nesciunt sequi cumque cum quo ratione officiis, corporis tempore qui, quia fugiat reiciendis quisquam odit deserunt id sapiente?</p>
        </div>
    </div>
    <div class="sides">
        <div class="side top"></div>
        <div class="side right "></div>
        <div class="side bottom"></div>
        <div class="side left"></div>
    </div>
</div>

问题原因 #

核心问题出在.container的z-index: -1设置上：

• 当父元素.container设置z-index: -1时，会创建新的堆叠上下文，整个容器及其所有子元素都会被置于body元素下方（body默认堆叠层级高于z-index为负的元素）。
• 这导致鼠标实际无法触碰到.box——你的鼠标交互的是body区域，而非.box，所以:hover事件根本不会触发。
• 调试器手动启用hover状态正常，是因为调试器直接强制应用样式，跳过了鼠标交互的触发条件。

解决方案 #

移除.container的z-index: -1设置，或者将其改为非负值（比如z-index: 0），这样容器及其子元素就能回到正常堆叠层级，鼠标可正常触发.box的:hover事件。

修改后的.container CSS代码：

.container{
    display: grid;
    place-items: center;
    background-color: rgb(43, 42, 42);
    border-radius: 15px;
    padding: 15px;
    width: 245px;
    height: 300px; 
    transition: all 1.2s ease;
    /* 移除z-index: -1，或改为z-index: 0 */
}

若需保持视觉层级关系，可通过调整其他元素的z-index实现，而非给容器设置负z-index。

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