$(".nom-class").hover pour 1 seul element

**redah75** · 09/01/2011, 13h50

Bonjour et bonne année

je sais que le titre n'est pas parlant, mais je m'explique:
j'afficher en html des vignettes:

Code :

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

1
2
3
4
5
6
<div class="non-class">
	contenu
	<div class="nom-class2">
		autre contenu
	</div>
</div>

et puis j'ai mis le code javascrpt suivant:

Code :

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

1
2
3
4
5
6
7
8
$(".nom-class").hover(
	function () {
		$(".nom-class2").fadeTo(500, 1);
	}, 
	function () {
		$(".nom-class2").fadeTo(500, 0);
	}
);

mais ce que je souhaiterais faire est d'afficher l'element de nom-class2 de UNIQUEMENT la vignette survolée.

Auriez vous une idée??

MErci beaucoup

**SpaceFrog** · 09/01/2011, 14h06

Code :

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

1
2
3
4
5
6
7
8
$(".nom-class").hover(
	function () {
		$(this).fadeTo(500, 1);
	}, 
	function () {
		$(this).fadeTo(500, 0);
	}
);

**redah75** · 09/01/2011, 14h14

Merci SpaceFrog pour ta reponse tres rapide.

ce que tu me propose ne marchera pas car l'element declencheur n'est pas la cible.
la cible est un element enfant de l'element declencheur:

Code :

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

1
2
3
4
5
6
<div class="div-declencheur">
	contenu
	<div class="div-cible">
		autre contenu
	</div>
</div>

**SpaceFrog** · 09/01/2011, 17h17

ha ben avec la structure html on voit tout de suite mieux

Code :

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

1
2
3
4
5
6
7
8
$(".nom-class").hover(
	function () {
		$(this).children(".nom-class2").fadeTo(500, 1);
	}, 
	function () {
		$(this).children(".nom-class2").fadeTo(500, 0);
	}
);

par contre tu n'aurais pas inversé les paramètres de fadeTo ?

**redah75** · 09/01/2011, 17h28

MILLE MERCIIIIII

)

ar conttre tu n'aurais pas inversé les parmètres de fadeto ?

non, je pense pas! http://api.jquery.com/fadeTo/

Merci encore une fois a toi et a jQuery qui nous rend la vie en rose

**SpaceFrog** · 09/01/2011, 17h40

arf en effet les paramètres sont dans le bon ordre, je confonds avec animate qui prend le duration en second paramètre

**redah75** · 09/01/2011, 17h50

une petite question de curiosité: me coseilles tu d'utiliser hover() ou plutot mouseenter() & mouseleave() ??

**SpaceFrog** · 09/01/2011, 17h55

personnellement je n'ai eu que des soucis avec hover
j'utilise mouseenter et mouseleave assortis d'un stop() pour éviter la pile d'évènements

**redah75** · 09/01/2011, 18h01

ah! quel genre de soucis??
et quel est l'interet du stop() ?

**SpaceFrog** · 09/01/2011, 18h09

si tu passe la souris de nombreuses fois rapidement au dessus de l'objet, tu créées une pile de hover qui vont s'executer à la suite...
le stop vide la pile, et evite d'avoir une animation qui dure 3 heures ...

**redah75** · 09/01/2011, 22h10

ah ouais, t'as bien raison, mais toi aussi tu cherches la bete noire

)

et comment ferais tu a ta maniere ce que je viens de faire??

Code :

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

1
2
3
4
5
6
7
8
$(".prod-thumbnail").hover(
	function () {
		$(this).children(".view").fadeTo(500, 1);
	}, 
	function () {
		$(this).children(".view").fadeTo(500, 0);
	}
);

**SpaceFrog** · 10/01/2011, 09h03

Code :

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

1
2
3
4
5
6
7
8
9
$(".prod-thumbnail").mouseenter(
	function () {
		$(this).children(".view").stop(true).fadeTo(500, 1);
	})
 $(".prod-thumbnail").mouseleave(
	function () {
		$(this).children(".view").stope(true).fadeTo(500, 0);
	}
);

**redah75** · 10/01/2011, 17h37

Genial, merci beaucoup

et est ce que ceci risque de buger ??:

Code :

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

1
2
3
4
5
6
7
8
$(".prod-thumbnail").mouseenter(
	function () {
		$(this).children(".view").stop(true).fadeTo(500, 1);
	}).mouseleave(
	function () {
		$(this).children(".view").stop(true).fadeTo(500, 0);
	}
);

et SI JAMAIS je change plus tard la structure html des div et que le div.view redescend d'un niveau ou 2, le $(this).children(".view") ne marche apparement plus, y a t il moyen de dire a jquery que c'est le div.view du $(this) qui m'interesse??