I have a div that is customized as a folder icon. On hover, it animates. Now I need to trigger the animation on hover on the parent div. For example, if I hover over folder-div it should animate the same as if I hover over folder div. My code is given below. I tried some of the solutions from Stackoverflow. But it's not working.
: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>Change your hover target to the parent :
.folder-div: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;
}
.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;
}
.folder-div: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>