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
*/

* { margin: 0; padding: 0; }
body { font: 12px "Lucida Grande", Helvetica, Arial, serif; }

article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }

#page-wrap { width: 960px; margin: 80px auto; }

h1 { font-size: 30px; margin: 0 0 10px 0; }
p { margin: 0 0 20px 0; }
h2 { font-size: 20px; margin: 50px 0 10px 0; }

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}

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

#tabs-example {
    background: #cecece;
    padding: 8px 0 0 0;
}

.nav { 
    list-style: none; 
    border-bottom: 1px solid #aaaa; 
    padding: 10px 10px 0 10px;
    
}
.nav li { display: inline; }

.nav li.active a {
    position: relative;
    z-index: 1; 
    bottom: -2px;
    margin-top: -2px;
    background: #eee;
    padding-top: 8px;
    padding-bottom: 8px;
}

.nav li a { 
    display: block;
    float: right; 
    text-decoration: none;
    position: relative;
    
    padding: 7px 50px; 
    margin: 0 0 0 -8px; 
    color: #222;
    background: #d8d7d8; 

    -webkit-border-top-right-radius: 20px 40px;
    -webkit-border-top-left-radius: 20px 40px;
    -moz-border-radius-topleft: 20px 40px;
    -moz-border-radius-topright: 20px 40px;
    
    -webkit-box-shadow: inset 1px 1px 0 white;
    -moz-box-shadow: inset 1px 1px 0 white;
    
    border: 1px solid #a0a0a0;
    border-bottom: 0;
}

.content {
    min-height: 20px;
    background: #eee;
    -webkit-box-shadow: inset 0 1px 0 white;
    -moz-box-shadow: inset 0 1px 0 white;
}

JavaScript

// DOM Ready
        $(function() {
        
            var originalBGplaypen = $("#playpen").css("background-color"),
                x, y, xy, bgWebKit, bgMoz, 
                lightColor = "rgba(47,193,216,0.75)",
                gradientSize = 1500;
                    
                // 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)";
                
      ...