If you open google chrome and open multiple tabs, you see the effect by hovering over a background tab. The pointer will have an "aura" effect which follows it around.
To clarify, I'm NOT asking how to make the entire tab glow a lighter color, I'm asking how to give the pointer the effect within some specified radius of it.
The key part is to get the mouse coordinates, then to place a radial gradient with those coordinates.
var originalBG = $(".nav a").css("background-color");
$('.nav li:not(".active") a').mousemove(function(e) {
x = e.pageX - this.offsetLeft;
y = e.pageY - this.offsetTop;
xy = x + " " + y;
bgWebKit = "-webkit-gradient(radial, " + xy + ", 0, " + xy + ", 100, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0.0))), " + originalBG;
bgMoz = "-moz-radial-gradient(" + x + "px " + y + "px 45deg, circle, " + lightColor + " 0%, " + originalBG + " " + gradientSize + "px)";
$(this)
.css({background: bgWebKit})
.css({background: bgMoz});
}).mouseleave(function() {
$(this).css({
background: originalBG
});
});
Something like that will do the job.
Check this demo from the illustrious Chris Coyier: http://css-tricks.com/examples/MovingHighlight/