Garder la méthode hover() sur plusieurs éléments à la fois

[Riless]

salut à tous,
Voila, je veut réaliser un effet de fadeIn/fadeOut sur une DIV contenant d'autres éléments comme suite :

Code html :

1
2
3
4
5
6
7
8
<div class="mainbox">
	<div class="boxes">
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		etc...
	</div>
</div>

L'effet que je veut réaliser c'est que lorsque je pointe le curseur sur "mainbox", l'élément "boxes" apparait avec la fonction :

Code :

1
2
$('.mainbox').hover(function(){
	$(this).find('.boxes').stop().animate({opacity: '1'}, 600)});

Et quand je sort le curseur "mouseout()" elle fait l'inverse.
ça c'est fait, mais le problème que j'ai rencontré, c'est que quand je met le curseur sur "boxes" ou l'un de ses éléments enfant (qui se trouve tous dans "mainbox") l'élément disparait aussi.

Alors ma question est la suivante: comment pourrais-je garder "boxes" visible même si le curseur se positionne sur l'un des descendant de "mainbox"

merci d'avance pour toute vos repenses