为什么 child div 的框阴影有时会跳到 parent div？

Question

我正在尝试借助 CSS pseudo-elements :before 和 :after 为框阴影过渡设置动画。原则上，JSFiddle 中提供的代码工作正常，除了在左栏中的 subdiv 鼠标移出时，其框阴影跳转到 leftparentdiv。每当 window 是 window 足够小以至于 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

Answer 1

您在 .subdiv:hover 上进行了转换，但在 .subdiv 上进行了 none 转换。 A box with a transform establishes a containing block. 这就是允许在鼠标悬停在 .subdiv 周围时绘制伪元素（及其阴影）的原因。但是当鼠标离开该元素时，伪元素（及其阴影）会跳转到.subdiv的父元素，因为.subdiv不再建立包含块，所以伪元素大小根据父元素元素而不是它的原始 .subdiv 因为父元素确实建立了一个包含块。当布局首次呈现时也是如此，before 光标曾经接触过 .subdiv（你只是看不到它，因为伪元素是不可见的）。

此行为实际上仅在 .subdiv 的父级有 overflow: visible 时才会发生。它不会以其他方式发生。这样做的原因是伪元素的框阴影实际上会在其原始 .subdiv 不是 :hover 时溢出父元素。因此，不可见的 overflow 会剪掉阴影。这不是很明显，因为父元素不滚动 — that 的原因是因为 box shadows don't affect layout.

假设期望的行为是 .subdiv 始终是投射阴影的行为，您所要做的就是定位 .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>

为什么 child div 的框阴影有时会跳到 parent div？

Why does a child div's box shadow sometimes jump to the parent div?

html

css

css-transitions

box-shadow