Page Capture - Highlight element under cursor

HTML

<body>
  <div id="content">
      <p>move <strong>your</strong> mouse!</p>
    <div class="box" style="background:#f1f1f1;"></div>
    <div class="box" style="background:#eee;"></div>
    <div class="box" style="background:#ddd;"></div>
    <div class="box" style="background:#bbb;"></div>
    <div class="box" style="background:#999;"></div>
  </div>
</body>
</html>

CSS

* { margin:0; padding:0; }
body { background:#999; }  .box { width:200px; height:200px; margin:20px; }
strong { font-weight: bold; }
#content { background:#fff; width:600px; padding:30px; margin:0 auto; height:1500px; }  
.outer { display:none; position:absolute; z-index:65000; border:1px solid red; }
.box { width:100px; height:100px; margin:10px; }

JavaScript

// http://stackoverflow.com/questions/4698259/jquery-highlight-element-under-mouse-cursor
// http://infocus.cc/

// http://jsbin.com/ejuya3/16/edit#javascript,html

var box = $("<div class='outer' />").css({
  display: "none", position: "absolute", 
  zIndex: 65000, background:"rgba(255, 0, 0, .3)"
}) .appendTo("body");

var lastTarget, last = +new Date;
$("body").mousemove(function(e){
    var offset, el = e.target;
    var now = +new Date;
    if (now-last < 25) 
      return;
    last = now;
    if (el === document.body) {
        box.hide(); 
        return;
    } else if (el.className === "outer") {
        box.hide();
        el = document.elementFromPoint(e.clientX, e.clientY);
    }
    box.show();   

    if (el === lastTarget) 
      return;
    lastTarget = el;
    el = $(el);
    offset = el.offset();
    box.css({
        width:  el.outerWidth()  - 1, 
        height: el.outerHeight() - 1, 
        left:   offset.left, 
        top:    offset.top 
    });
});