html - 为什么子div的框阴影有时会跳到父div？

我正在尝试借助CSS伪元素:before和:after为框阴影过渡设置动画。原则上，JSFiddle中提供的代码可以正常工作，除了将鼠标移出左侧列中的subdiv之外，其框阴影会跳到leftparentdiv。只要窗口的窗口足够小以至于overflow-y: scroll就会出现此现象。在支持框阴影的所有浏览器中似乎都会出现此问题。

我想我这里缺少明显的东西，但无法弄清楚是什么。

body {
    background-color: pink;
}
.subdiv {
    width: 25vw;
    border: 1px solid;
}
.subdiv:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.30);
    transition: all 0.6s ease-in-out;
    opacity: 0;
}
.subdiv:hover {
    transform: scale(1.1, 1.1);
}
.subdiv:hover:after {
    opacity: 1;
}
#leftparentdiv {
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid;
    width: 47vw;
    padding: 3%;
    overflow-y: scroll;

}
#rightparentdiv {
    position: absolute;
    left: 53vw;
    top: 0;
    border: 1px solid;
    width: 47vw;
    padding: 3%;
    overflow-y: scroll;
}

<div id="leftparentdiv">
    <div class="subdiv">
      Blabla;
    </div>
</div>
<div id="rightparentdiv">
    <div class="subdiv">
      Blabla;
    </div>
</div>

JSFiddle

最佳答案

您在.subdiv:hover上进行了转换，但在.subdiv上没有进行转换。 A box with a transform establishes a containing block.这是在鼠标悬停在.subdiv上时可以在.subdiv周围绘制伪元素（及其阴影）的原因。但是当鼠标离开元素时，伪元素（及其阴影）会跳转到.subdiv的父元素，因为.subdiv不再建立包含块，因此伪元素的大小取决于父元素而不是其父元素源于.subdiv，因为父元素确实建立了一个包含块。在光标第一次触摸.subdiv之前第一次渲染布局时，也是如此（您不会看到它，因为伪元素是不可见的）。

仅当overflow: visible的父级具有.subdiv时，才会发生此行为。否则不会发生。这样做的原因是，只要原始元素的:hover不是overflow，伪元素的框阴影实际上就会溢出父元素。因此，不可见的.subdiv会将阴影剪掉。由于父元素不会滚动，因此这不是立即可见的-其原因是因为box shadows don't affect layout。

假定.subdiv始终是期望的行为，那么您要做的就是位置，以便它始终建立一个包含块：

body {
    background-color: pink;
}
.subdiv {
    width: 25vw;
    position: relative;
    border: 1px solid;
}
.subdiv:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.30);
    transition: all 0.6s ease-in-out;
    opacity: 0;
}
.subdiv:hover {
    transform: scale(1.1, 1.1);
}
.subdiv:hover:after {
    opacity: 1;
}
#leftparentdiv {
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid;
    width: 47vw;
    padding: 3%;
    overflow-y: scroll;

}
#rightparentdiv {
    position: absolute;
    left: 53vw;
    top: 0;
    border: 1px solid;
    width: 47vw;
    padding: 3%;
    overflow-y: scroll;
}

<div id="leftparentdiv">
    <div class="subdiv">
      Blabla;
    </div>
</div>
<div id="rightparentdiv">
    <div class="subdiv">
      Blabla;
    </div>
</div>

关于html - 为什么子div的框阴影有时会跳到父div？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43412393/