Hide & Show des thumbnails

Muxabble
Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

<li><a href="#" data-target="work-1">Work 1</a></li>
<li><a href="#" data-target="work-2">Work 2</a></li>
<li><a href="#" data-target="work-3">Work 3</a></li>
<div class="column col-w-pd column-50 column-offset-50">
            <img src="http://pipsum.com/1500x1500.jpg" alt="" class="thumb-work" id="work-1">
            <img src="http://pipsum.com/1500x1500.jpg" alt="" class="thumb-work" id="work-2">
            <img src="http://pipsum.com/1500x1500.jpg" alt="" class="thumb-work" id="work-3">
        </div>  
$(document).ready(function() {
  $('.thumb-work').mouseenter(function() {
    var target = $(this).data('target')
    $('#' + target).show()
  }).mouseleave(function(){
    var target = $(this).data('target')
    $('#' + target).hide()
  });
});

Ce que je veux

Ce que je recherche faire c'est lors du passage de la souris l'image correspondant au lien s'affiche

Ce que j'obtiens

Pour le coup le script actuelle n'affiche pas l'image.

2 réponses

Lartak
Réponse acceptée

Bonsoir.
Vu que tu veux que l'évènement soit actif sur le lien, il faut que tu utilises un sélecteur pour le lien et non sur celui des images, un petit exemple ici.

Muxabble
Auteur

Salut, merci bien pour ton petit example, j'y est jeter un coup d'oeil et l'ai modifier à ma manière, je pensais qu'il y avait une genre de fonction comme toogle qui pouvait faire la même chose !