Bonjour,

Un problème récurent que je peine toujours à résoudre correctement. Pourtant ça à l'aire tout simple...

Le but de l'opération :
Avoir une image et quand on mets le curseur dessus la photo se voile et des infos y apparaisse. Lorsque le curseur quitte la zone, les infos et le voile disparaisse.

Problème :
Les infos ( text ) font 'perdre le focus' et l'animation s'arrête ou 'repart'
J'ai découver 'mouseenter' et mouseleave qui règles une bonne partie du problème. Mais durant l’animation, le problème persiste...

Code html :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<table class="offre">
	<tr>
		<td>
			<div class="vignette">
				<img class="bordure" src="img/stromae.jpg" alt="vignette" />
				<div class="supperpose">
					<h2>CONCERT</h2>
					<h3>Concert de stromae</h3>
					<p>Cette année, pour ce week-end Thalasso, qui se déroulera les 14 et 15 mai, nousvous emmenons au Novotel Thalassa **** au Touquet</p>
					<a href="#"><span class="savoir_plus"> En savoir plus </span></a>
				</div>
			</div>
			<h3>Concert de Stromae</h3>
		</td>
		<td>
			<div class="vignette">
				<img class="bordure" src="img/stromae.jpg" alt="vignette" />
				<div class="supperpose">
					<h2>CONCERT</h2>
					<h3>Concert de stromae</h3>
					<p>Cette année, pour ce week-end Thalasso, qui se déroulera les 14 et 15 mai, nousvous emmenons au Novotel Thalassa **** au Touquet</p>
					<a href="#"><span class="savoir_plus"> En savoir plus </span></a>
				</div>
			</div>
			<h3>Concert de Stromae</h3>
		</td>
	</tr>
</table>

Code css :
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
div.vignette{position: relative;height:150px;width:150px;margin:auto;}
div.vignette img{position: absolute;left:0;border:none; }
div.supperpose{text-align:center;position:relative;height:150px;width:150px;background-color: rgba(86, 108, 122, 0.85);}
div.supperpose h2, div.supperpose h3{color:white;margin:0;padding:2;font-size:12pt;}
div.supperpose h2{margin:auto;width:100px;}
div.supperpose h3{}
div.supperpose p{font-size:7pt;color:white;margin:2px;font-weight:normal;}
div.supperpose span{position:absolute;bottom:0;left:0;width:150px;margin:0;line-height:1.5em;background:#566c7a;color:white;font-size:10pt;border-top: solid white 1px;}

Code jQuery :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
 $(function runEffect() {
	$('div.supperpose').hide();
	$('div.vignette').mouseenter(function(){
		$(this).find('div.supperpose').stop().show( 'explode', 500 );
	});
	$('div.vignette').mouseleave(function(){
			$(this).find('div.supperpose').stop().hide( 'explode', 500 );
	});
});

J'ai déjà testé beaucoup de chose et fini par m'y perdre... Un coup de main sera donc le bienvenue ^^