modificar un span onmouseover

[engonga]

hola tengo una serie de <divs> que tendtro de dada uno tiene un <span>

Código HTML:

<div id="items_familie"> <div class="item_fam" style="background:url(imatges_productes/bici_electrica.jpg ) top left ;"> <span>Bicicletes</span> </div> 					 
                    <div class="item_fam" style="background:url(imatges_productes/ciclo_motor_electrico.jpg ) top left ;">
       <span>Ciclomotors</span> </div> 
                    <div class="item_fam" style="background:url(imatges_productes/cotxes_fons.jpg ) top left ;"> <span>Cotxes</span> </div> 
                    <div class="item_fam" style="background:url(imatges_productes/punto_recarga.jpg ) top left ;"> <span>Infraestructures de Rec&agrave;rrera</span> </div> 
                    <div class="item_fam" style="background:url(imatges_productes/motos_fons.jpg ) top left ;"> <span>Motocicletes</span> </div> 
                    <div class="item_fam" style="background:url(imatges_productes/cuadriciclo_electrico.jpg ) top left ;"             <span>Quadricicles</span> </div> 
                </div><!-- items_families --> 

y no se como hace para que cuando me pasen por encima de un div de modifique solo el css del aspn que esta dentro de este div

yo he probado con

Código HTML:

$(".item_fam").mouseover(function () {
                $("span").css("background","red");
                  });

pero me modifica todos los span