11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour

j'essaie de faire fonctionner un effet de hover avec 2 images.
J'ai deux divs avec une image chacune. Au passage de la souris sur la div je cache la première div pour afficher la seconde. Mon problème est que quand je laisse ma souris sur la div ça n'arrête pas de clignoter. L'effet que je veux est : au passage de la souris sur la div cela change d'image et quand on retire la souris de la div cela affiche l'image d'origine.

Je précise que j'ai plusieurs div avec les classes project et hover. Je veux que l'effet soit appliqué sur la div survolée et non sur toutes les div.

Voici le code en question :


<div class="project">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/320px-Gull_portrait_ca_usa.jpg" alt="">
</div>
<div class="hover">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Chess_pawn.jpg/320px-Chess_pawn.jpg" alt="">
</div>

$(document).ready(function () { 

    $(".project").hover(function() {
        $(this).hide();
        $(this).next('div').show();
    }, function() {
        $(this).show();
        $(this).next('div').hide();
    });

});
.hover {
  display: none;
}



Mon code jquery est probablement faux mais je vois pas où (je débute)

Merci Smiley smile
Modifié par Mokhona (04 Aug 2017 - 16:36)
Modérateur
* code fait de tête sans testé


comme ceci par exemple ?

<img class="project" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/320px-Gull_portrait_ca_usa.jpg" data-hover="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Chess_pawn.jpg/320px-Chess_pawn.jpg" data-src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/320px-Gull_portrait_ca_usa.jpg" alt="">




$('.project').hover(
            function(){
                var src = $(this).data('hover');
                $(this).attr('src', src);
            },

            function(){
                var src = $(this).data('src');
                $(this).attr('src', src);
            }
);

Modifié par niuxe (04 Aug 2017 - 18:33)
Modérateur
De rien Smiley smile

ps : Un petit résolu au sujet et apparemment notifier meilleur réponse (nouvelle fonctionnalité du forum apparemment)