Discussion :

[lyser]

Bonjour,
Ce que j'aimerai faire :
Déplacer l’image 2 de 5px vers le bas en survolant l'image 1.



Je ne connais pas le javascript (un peu le css) mais je crois que ce code que j'ai trouvé pourrais m'aider à faire ce que je veux, mais ça ne marche pas, qu'est-ce qui ne va pas dans ce code ? (les id des images sont image1 et image2)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
jQuery(document).ready(function($) {
 
    $('.image1').on('mouseenter', function() {
        $(".image2").addClass("move5px");
    });
});
 
$('.image1').on('mouseleave', function() {
    $(".image2").removeClass("move5px");
});

La classe que j'utilise :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.move5px{
   top:-5px
}

[Doksuri]

et en CSS ca n'irai pas ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
image 1 : <img src="http://placekitten.com/200/100" />
image 2 : <img src="http://placekitten.com/200/101" />
image 2 : <img src="http://placekitten.com/200/102" />

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
img { display: block; }
img:first-of-type:hover + img { border: 2px solid red; }

[jreaux62]

Bonjour,

tu n'est pas très loin.

• Qui dit "id" (identifiant), dit "#"
• Qui dit "class", dit "."

IL faut aussi avoir intégré le script de jQuery.

• https://cdnjs.cloudflare.com/ajax/li.../jquery.min.js

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
jQuery(document).ready(function($) {
 
    $('#image1').on('mouseenter', function() {
        $("#image2").addClass("move5px");
    });
});
 
$('#image1').on('mouseleave', function() {
    $("#image2").removeClass("move5px");
});

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.move5px{
   margin-top:5px; 
}

Cela dit, on peut le faire SANS jQuery, en JavaScript vanilla :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
var image1 = document.querySelector('#image1');
var image2 = document.querySelector('#image2');
 
image1.addEventListener('mouseenter', function(){
  image2.classList.add('move5px');
});
image1.addEventListener('mouseleave', function(){
  image2.classList.remove('move5px');
});

[lyser]

Merci Doksuri mais je préférerai rester sur ce code de base et essayer de le rendre fonctionnel.

Ok jreaux62, merci, je crois comprendre la logique de ce code (le premier avec Jquery), je l'ai utilisé et le hover fonctionne mais le mouseleave non, l'image reste avec son décalage de 5px, je précise que j'utilise un thème sur wordpress, je sais pas si ça a un rapport ?

*edit*
Ok j'ai déplacé les }); de la ligne 6 à la fin et le mouseleave fonctionne maintenant.
Merci =)

[lyser]

Je voulais que le déplacement de l'image soit animé alors j'ai rajouté une transition: 150ms; au code css :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.move5px{
  margin-top:5px;
  transition: 150ms;
}

Le hover est maintenant animé mais le mouseleave lui est toujours sans animation, comment lui ajouter une animation aussi ?

[jreaux62]

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#image2 { transition: 150ms; }
.move5px{
   margin-top:5px; 
}

Mais en réalité, ici, NUL besoin de JS ou jQuery !
CSS suffit (comme indiqué par Doksuri) :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
#image2 { transition: 150ms; }
#image1:hover + #image2 { margin-top:5px; }

[lyser]

Parfait, merci beaucoup jreaux62 !