Problème Javascript mousemouve

Bonjour, je m’appelle Mathias et j'ai suivi une formation graphisme/web et 3d, je suis sur ma 2eme année ou j'apprend le javascript en partis en cour et surtout chez moi.

Je suis en train de coder mon portfolio et la je bloque sur les fonctionnalités de mon carrousel, j'explique:

Il se compose de:

-une div avec tous les éléments de navigation(flèches gauche et droite et un exit )

ce que je veux faire:

-Quand la souris bouge dans la zone "move_it",les éléments de navigations arrives des 3 cotes et reste affiché pendant 4,5 secondes.

-Ensuite quand je passe sur la zone "back", les élément de navigation reste affiché en permanence.

Le problème:

-Le "mousemove" fonctionne très bien mais quand je survole les flèches avant la fin du temps, le "hover" des flèches ne fonctionne plus, il faut que je sorte de la fenêtre pour le réactiver.

pouvez vous m'aider?

Merci.

mon HTML

<div class="visioneuse">

<div class="move_it"></div>

<div class="fleche">

<div class="exit">
<div class="sortie"></div>
</div>

<div class="back">
<div class="flnav flg">
<img src="/images_Architecture/trace6.png" alt="">
</div>
</div>

<div class="back">
<div class="flnav fld">
<img src="/images_Architecture/trace5.png" alt="">
</div>
</div>

</div>

<div class="carousel">
<img src="/images_Architecture/test_View02.jpg" alt="">
<img src="/images_Architecture/test_View03.jpg" alt="">
<img src="/images_Architecture/test_View04.jpg" alt="">
<img src="/images_Architecture/test_View05.jpg" alt="">
<img src="/images_Architecture/test_View06.jpg" alt="">
<img src="/images_Architecture/test_View07.jpg" alt="">
<img src="/images_Architecture/test_View08.jpg" alt="">
<img src="/images_Architecture/test_View09.jpg" alt="">
</div>
</div>


et mon script:

move.addEventListener('mousemove',function(){
flg.style.transform = 'translateX(0)';
fld.style.transform = 'translateX(0)';
setTimeout(function(){
flg.style.transform = 'translateX(-4vw)';
fld.style.transform = 'translateX(4vw)';
},3000);
});