//* Define variables and html elements const sidebar = document.querySelector('.sidebar'); const arrow = document.querySelector('.arrow'); //* Add event listeners sidebar.addEventListener('mouseout', () => { arrow.style.transitionDelay = '0s'; sidebar.style.transitionDelay = '0.05s'; }) sidebar.addEventListener('mouseover', () => { arrow.style.transitionDelay = '0.05s'; sidebar.style.transitionDelay = '0s'; })

* { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; width: 100vw; display: flex; } .sidebar { position: fixed; height: 100vh; background-color: black; width: 80px; transition: all 0.5s ease; z-index: 0; } .arrow { position: relative; left: 7.5px; right: 7.5px; top: 7.5px; width: 65px; height: 65px; fill: rgb(115, 151, 162); transition: all 0.5s ease; z-index: 2; } .arrowBackground { position: absolute; top: 0; width: 82px; height: 80px; background-color: rgb(30, 30, 30); z-index: 1; border: 2px solid rgb(50, 50, 50); transition: all 0.5s ease; } .sidebar:hover { width: 240px; } body:has(.sidebar:hover) .arrow { transform: rotate(180deg); left: 167.5px; } body:has(.sidebar:hover) .arrowBackground { left: 160px; }

Lorsque je survole la barre latérale, la flèche et la barre latérale mettent 0,5 seconde à se convertir mais la classe d'arrière-plan de flèche le fait immédiatement, je ne sais pas pourquoi, je m'attendais à ce que la conversion prenne 0,5 seconde mais je ne sais pas comment faire répare-le

J'ai essayé de réorganiser du code mais rien n'a fonctionné, j'ai essayé de définir un délai de transition en JavaScript mais cela ne fonctionne toujours pas