Discussion :

[Sumoner]

Bonjour,
J'ai besoin d'afficher un élément (.eventslist) mais uniquement celui contenu dans le td ou la souris est dessus. Car le probleme est que ce code affiche toutes les classes "eventslist".
Voici mon code xhtml:

Code :

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

1
2
3
4
5
6
7
<td class="eve">
      <div class="eventCalendrierJour">
           <a href="event.php?event=8">12</a>
           <div class="eventslist">kjsbsj<br/>
           </div>
      </div>
</td>

et mon code javascript:

Code :

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

1
2
3
4
5
$(".eve").mouseover(function(){
			$(".eventslist").show();
		        }).mouseout(function(){
			$(".eventslist").hide();
	});

J'ai essayé avec .next(".eventslist") mais cela ne marche pas!!!
Comment faire pour afficher seulement la class eventslist du td sur lequel il y a la souris.
Merci d'avance.

[danielhagnoul]

Bonsoir.

Voici un exemple :

Code :

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

1
2
3
4
5
6
7
8
 
$(".eve").mouseover(function(){
    $(this).find(".eventslist").show();
});
 
$(".eve").mouseleave(function(){
    $(this).find(".eventslist").hide();
});

Il vaut mieux utiliser mouseleave que mouseout, voir intervention précédente sur le problème de mouseout.

Une autre possibilité, avec effet slide :

Code :

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

1
2
3
4
5
6
7
8
9
 
$(".eve").hover(
    function(){
        $(this).find(".eventslist").slideDown("slow");
    }, 
    function(){
        $(this).find(".eventslist").slideUp("slow");
    }
);

[Sumoner]

Niquel merci beaucoup.
Bonne journée.