Forum : 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);
});

3 réponses

Soundboy39

Hello,

Je ne comprend pas ce que tu entend pas "le "hover" des flèches ne fonctionne plus", tu parle du comportement CSS ou d'un déclenchement via un évenement "mouseover" ?

Sinon voici quelques petits truc que j'ai relevés sans garantir que cela règle ton problème :

quels sont les élements qui constituent l'objet "move" ?
tu devrais peut être retirer le processus d'écoute en faisant "move.removeEventListener" en moment du déclenchement (il faudra peut être remplacer "move" par "this" si çà fonctionne pas...) puis remettre en place le processus en faisant un "addEventListener" au moment du timeout;
essaie aussi éventuellement avec "mousenter" à la place de "mousemove";
la div "carousel" est mal fermée, çà n'a peut être rien à voir mais je te le signale quand même...;

Pierrot01

Nan, la div carousel est bien fermer :D
Mais c'est écrit comme un cochon, c'est pour ca que tu n'as pas vu :D

<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>

Le BA BA du codage est quand même la mise en page, l'indentation :D
Les utilisateurs pouraient avoir la correction de poser des bout de code propre pour le bonheur de nos ptits yeux :D :D

a++

amzounslide95

Je pense qu'il faut "tuer" un des timeout avec https://www.toutjavascript.com/referenc ... imeout.php <a href="https://emicalculator.org.in/">emi calculator</a> <a href="https://gstseva.co.in/gst-login/">gst login</a> <a href="https://ifsccode.gen.in/">ifsc code</a> au moment du passage sur le div back
Mais il faudrait le script complet pour mieux comprendre

Generatore di parole casuali