JQuery et rollover

Salut à tous!

Voilà, sur une série d'images placées les unes à côtés des autres, j'essaye de mettre en place un effet de rollover qui permette d'afficher, au passage de la souris sur l'image, sa description sur l'image suivante (qui se retrouve donc masquée).

Jusque là, ça va. Mais le problème, c'est que une fois l'image d'à côté masquée par la description, je ne peux effectuer de rollover sur cette image pour afficher sa propre description. L'idée est donc que la description disparaisse lorsque la souris se trouve dessus.

Mais je bloque... si quelqu'un a une idée?

<div class="member">
    <div class="member-img"><img src="image1.jpg" alt="" border="0" /></div>			
    <div class="member-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In interdum faucibus velit, nec hendrerit felis ornare semper. Praesent in tellus. </div>
</div>

... <!-- à répéter autant de fois que nécessaire -->

Le CSS:

.member { position: relative; float: left; display: inline; width: 233px; height: 233px; padding: 1px; }
.member-img { border: none; }
.member .member-desc { z-index: 999; display: none; position: absolute; top: 1px;  left: 236px;  width: 213px; height: 213px; overflow: hidden; padding: 10px; background-color: #252525; }

Le code jQuery

   $('.member').mouseover(function(){   
	$('.member-desc',this).css({display: 'block', opacity: '1'});   
   });

   $('.member').mouseout(function(){   
	$('.member-desc',this).css({display: 'none', });   
   });				

Ok, je viens de résoudre mon problème de la manière la plus simple qui soit, en utilisant la fonction hover() et en ajoutant une fonction mouseover():

   $('.member').hover(
	function() {
	$('.member-desc',this).css({display: 'block', opacity: '1'});	   
	},
	function() {
	$('.member-desc',this).css({display: 'none'});
	}
   );

   $('div.member-desc').mouseover(
	function() {
		$(this).css({display: 'none'});
	});

Modifié par cedricn (18 Mar 2010 - 11:06)