Mouse Pointer Glow

by Hari Menon

HTML

<div class="nav">
    <ul>
        <li><a href="#">First Item</a></li>
        <li><a href="#">Second Item</a></li>
        <li><a href="#">Third Item</a></li>
    </ul>
</div>

CSS

body {
    background-color:#999;
}

a {
    background-color: #ddd;
    display:block;
    width:300px;
    border:1px solid #f00;
    border-collapse:collapse;
    margin:3px;
    padding:3px;
    padding-left:30px;
}

JavaScript

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
    });
})