Highlight Follows Mouse

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <title>Moving Highlight</title>
</head>

<body>

    <div id="page-wrap">
    
        <h1>Highlight Follows Mouse</h1>
        
        <p>Idea based on the tabs in <a href="http://www.google.com/chrome/">Google Chrome</a>. 
        Original code by <a href="http://doctype.tv/">Doctype</a> guys and altered by me. Works in Webkit or Mozilla browsers for the moment. </p>
        <p><a href="http://css-tricks.com/moving-highlight/">Original</a></p>
        
        <h2>Basic Idea</h2>
    
        <div id="playpen">Mouse Over</div>
    
        <h2>Sorta-Kinda Like Chrome Tabs</h2>
        
        <div id="tabs-example">
            
        <ul class="nav clearfix">
           <li><a href="#">Home</a></li>
           <li><a href="#">About</a></li>
           <li class="active"><a href="#">Clients</a></li>
           <li><a href="#">Contact Us</a></li>
        </ul>
            
            <div class="content"></div>
        
        </div>
    
    </div>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
</body>

</html>

CSS

/*
     CSS-Tricks Example
     by Chris Coyier
     http://css-tricks.com
*/


#playpen { background: rgb(155,155,155); text-align: center; height: 200px; line-height: 200px; }

JavaScript

// DOM Ready
        $(function() {
        
            var originalBGplaypen = $("#playpen").css("background-color"),
                x, y, xy, bgWebKit, bgMoz, 
                lightColor = "rgba(255,255,255,0.75)",
                gradientSize = 100;
                    
                // Basic Demo
                $('#playpen').mousemove(function(e) {
                
                    x  = e.pageX - this.offsetLeft;
                    y  = e.pageY - this.offsetTop;
                    xy = x + " " + y;
                       
                    bgWebKit = "-webkit-gradient(radial, " + xy + ", 0, " + xy + ", " + gradientSize + ", from(" + lightColor + "), to(rgba(255,255,255,0.0))), " + originalBGplaypen;
                    bgMoz    = "-moz-radial-gradient(" + x + "px " + y + "px 45deg, circle, " + lightColor + " 0%, " + originalBGplaypen + " " + gradientSize + "px)";
                                        
                    $(this)
                        .css({ background: bgWebKit })
                        .css({ background: bgMoz });
                    
                }).mouseleave(function() {            
                    $(this).css({ background: originalBGplaypen });
                });
            
        
        
                
                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)";
                
      ...