Hola muy buenas. No soy muy experto en el tema pero por lo que sé todo esto se puede hacer con los eventos de Javascript y se simplificaría mucho con el jQuery.
En primer lugar puedes trabajar con el objeto evento que tiene dos propiedades pageX y pageY, las cuales te dan la posición x e y del ratón.
Luego están los eventos mouseenter y mouseleave que trabajan igual que el onmouseover/out.
De esta forma puedes programar con el mouseenter/leave te cambie el color de fondo:
Código HTML:
$("#casilla").mouseenter(function(evento){
$("casilla").css({ background: "#FF0000" });
});
Siendo casilla tu div 100x100.
Luego con un setTimeout activar otra función que haga que salga la leyenda donde está el ratón.
Código HTML:
var temporizador;
$("#casilla").mouseenter(function(evento){
$("casilla").css({ background: "#FF0000" });
clearTimeout(temporizador);
temporizador = setTimeout("mostrar()",3000);
});
Donde hemos definido una variable temporizador. El 3000 del setTimeout es en milisegundos, es decir, que ocurrirá a los 3 segundos.
La función mostrar es la que hará que se muestre la leyenda:
Código HTML:
function mostrar(){
$("#leyenda").css("left", evento.pageX + 5);
$("#leyenda").css("top", evento.pageY + 5);
$("#leyenda").css("display", "block");
};
El evento.pageX/pageY hace que la leyenda aparezca donde está el ratón, ya que hemos cambiado su css.
Por último, que cuando salga del div que vuelva todo como antes:
Código HTML:
$("#casilla").mouseleave(function(evento){
$("casilla").css({ background: "#FFFFFF" });
$("#leyenda").css("display", "none");
});
Para automatizarlo únicamente tienes que utilizar los selectores del jQuery y hacer que las capas casilla[i] se les corresponda la capa leyenda[i].
Vuelvo a decir que soy principiante en esto y no estoy totalmente seguro de que el código sea 100% este, pero de lo que sí lo estoy es que la mecánica si es esta.
Un saludo y espero haberte ayudado.