Home I have a div which is customised as a folder icon. On hover it animates. Now I need to trigger the same animation on hover on parent div

Questions

I have a div which is customised as a folder icon. On hover it animates. Now I need to trigger the same animation on hover on parent div

byMR

July 17, 2023

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>

>Solution :

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>