我有一个自定义为文件夹图标的div。悬停时,它会设置动画。现在,我需要在悬停在父div上时触发动画。例如,如果我悬停在
folder-div
它的动画效果应该和我悬停在上面一样
folder
div.下面给出了我的代码。我尝试了Stackoverflow的一些解决方案。但它不起作用。
: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;
}
.folder:hover::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;
}
.folder:hover > .feuille {
transform: scaleX(.95) scaleY(.95);
opacity: 1;
}
.folder-div {
background: lightgreen;
height: 100px;
width: 130px;
}
<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>
