Bouger l'image 2 en survolant l'image 1

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

Pièce jointe 601226

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:

---

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:

---

1 2 3

.move5px{ top:-5px }

---

et en CSS ca n'irai pas ?

Code:

---

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:

---

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

---

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:

---

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:

---

1 2 3

.move5px{ margin-top:5px; }

---

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

Code:

---

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'); });

---

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

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

Code:

---

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 ?

Code:

---

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:

---

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

---

Parfait, merci beaucoup jreaux62 ! :merci:

Citation:

---

Envoyé par Doksuri

et en CSS ca n'irai pas ?

---

Citation:

---

Envoyé par lyser

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

---

Citation:

---

Envoyé par jreaux62

Mais en réalité, ici, NUL besoin de JS ou jQuery : [quasiment le meme css que moi]

---

Citation:

---

Envoyé par lyser

Parfait, merci beaucoup jreaux62 ! :merci:

---

.............:koi:

@Doksuri

(j'ai mis à jour mon message précédent :calin: )

s'il veut conserver le code JQuery, libre à lui, non ?
Tant qu'il est content du résultat... ;)

Sinon, en CSS, il existe encore moult solutions, notamment pour traiter plusieurs groupes "image + ombre" via des classes, sélecteur adjacent (+) et éventuellement position:absolute.