problema en jquery

[xlos_mas_pro]

lo que pasa es que tengo tengo un div con otros elementos adentro como etiquetas p etiquetas span etc... y ademas en el div tengo una capa oculta, entonces al pasar el mouse por el div se muetra el div oculto y al sacar el mouse del div se esconde el div oculto muy simple pero el problema es que si paso el mouse por una etiqueta P que se encuentra dentro del div, la capa oculta se esconde y se muestra denuevo y haci con toda las etiquetas que se encuentran en el div

aqui el codigo

Código PHP:

<section id="perfiles">
 
<?php foreach($dis as $d): ?>
    
    <article class="usuario">
        <?php echo anchor('user/'.$d->usuario,$d->nombre.' '.$d->apellido,array('class' => 'nombre')); ?>
        <p id="user">Usuario: <?php echo $d->usuario; ?></p>
        <p id="yo">Es Diseñador</p>
 
        <div class="foto" style="position:absolute; display:none;"><img src="<?php echo base_url(); ?>css/image/fotosuser/<?php echo $d->foto; ?>" width="100" height="100" ></div>
 
    </article>
 
<?php endforeach; ?>
 
</section>
 

aqui el codigo jquery

Código Javascript:

$(document).ready(function(){
 
       $('.usuario').mouseover(function(){
               $(this).children('.foto').show(500);
   
       });
       $('.usuario').mouseout(function(){
                      $(this).children('.foto').css({
                            'display': 'none',
                     });
       });
});
 

como ven lo que pasa es que si es que si pongo el mouse ensima de la capa class="usuario" se muestra la capa class="foto" y si es que saco el mouse de la capa class="usuario" se ocualta la capa class="foto" pero si es que paso el mouse por una etiqueta P que esta dentro de la capa class="usuario" se econde y se muestra la capa class="foto" como que pestañea.