如何在hover父容器folder-div时触发folder图标动画？

要实现鼠标悬停在父容器.folder-div上时触发子元素.folder的动画，只需要在现有CSS中添加针对父容器hover状态下子元素的样式规则，和原有的.folder:hover效果保持一致即可：

:root {
    --folder-size: 80px;
    --folder-color: lightblue;
    --folder-radius: 8px;
    --folder-shadow: 3px 5px 5px 0px rgb(37 37 37 / 75%);
}
.folder {
    width: var(--folder-size);
    height: calc(var(--folder-size) * 0.6);
    background-color: var(--folder-color);
    border-radius: var(--folder-radius);
    position: relative;
    border-top-left-radius: 0;
    cursor: pointer;
    transition: width .3s .3s, height .3s .3s;
    margin-top: 10px;
}
.folder, .folder::before{
    box-shadow: var(--folder-shadow);
    -webkit-box-shadow: var(--folder-shadow);
    -moz-box-shadow: var(--folder-shadow);
}
.folder::before, .folder::after {
    position: absolute;
    content: '';
    background-color: var(--folder-color);
}
.folder::before {
    width: calc(var(--folder-size) / 3);
    height: calc(var(--folder-size) / 10);
    top: calc(0px - (var(--folder-size) / 10 / 1.5));
    border-top-left-radius: var(--folder-radius);
    border-top-right-radius: var(--folder-radius);
    z-index: -1;
    transition: width .3s .3s, height .3s .3s, top .3s .3s;
}
.folder::after {
    background-color: lightblue;
    width: 100%;
    height: 100%;
    border-radius: var(--folder-radius);
    transform-origin: bottom right;
    transition: transform .3s;
}
/* 保留原有的hover效果 + 添加父容器hover时的效果 */
.folder:hover::after,
.folder-div:hover .folder::after {
    transform: skew(-10deg) scaleY(.85);
}
.feuille {
    width: 100%;
    height: 100%;
    background-color: white;
    position: absolute;
    border-radius: var(--folder-radius);
    transform: scaleX(.95) scaleY(.8);
    transform-origin: bottom;
    transition: transform .3s;
    opacity: 0;
}
/* 保留原有的hover效果 + 添加父容器hover时的效果 */
.folder:hover > .feuille,
.folder-div:hover .folder > .feuille {
    transform: scaleX(.95) scaleY(.95);
    opacity: 1;
}
.folder-div {
    background: lightgreen;
    height: 100px;
    width: 130px;
}

对应的HTML代码无需修改：

<div class="folder-div" style="">
    <div class="folder">
        <div class="feuille"></div>
    </div>
    <a href="#">Sample Link </a>
</div>
<div class="folder-div">
    <div class="folder">
        <div class="feuille"></div>
    </div>
    <a href="#">Sample Link </a>
</div>
<div class="folder-div">
    <div class="folder">
        <div class="feuille"></div>
    </div>
    <a href="#">Sample Link </a>
</div>
<div class="folder-div">
    <div class="folder">
        <div class="feuille"></div>
    </div>
    <a href="#">Sample Link </a>
</div>

原理说明 #

通过CSS的后代选择器，当.folder-div处于hover状态时，选中其内部的.folder元素，为它的伪元素::after和子元素.feuille应用和直接hover.folder时完全相同的样式，从而实现鼠标悬停在整个容器上时触发文件夹动画的效果。

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