Question

我尝试借助CSS伪元素:before和:after来设置框阴影过渡动画。原则上，JSFiddle中提供的代码工作正常，除了在左侧列中的subdiv之外，它的盒子阴影跳转到leftparentdiv。每当窗口窗口足够小而overflow-y: scroll启动时，就会出现此问题。问题似乎发生在所有支持框阴影的浏览器中。

我想我在这里遗漏了一些明显的东西，但无法弄清楚是什么。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

JSFiddle

Answer 1

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

仅当.subdiv的父级有overflow: visible时才会出现此行为。否则不会发生。原因是因为伪元素的框阴影实际上在父元素的原始.subdiv不是:hover时溢出。所以一个不可见的overflow剪掉了阴影。由于父元素不会滚动，因此的原因是box shadows don't affect layout。

假设.subdiv所需的行为始终是投射阴影的行为，您所要做的就是定位.subdiv，以便它始终建立一个包含块：

＆＃13;
＆＃13;
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; }
＆＃13;
<div id="leftparentdiv"> <div class="subdiv"> Blabla; </div> </div> <div id="rightparentdiv"> <div class="subdiv"> Blabla; </div> </div>
＆＃13;
＆＃13;
＆＃13;

为什么儿童div的盒子阴影有时会跳到父div？

1 个答案: