title: How do I efficiently highlight element under mouse cursor with an overlay?
body: <p>Still trying to answer <a href="https://stackoverflow.com/questions/4698259/jquery-highlight-element-under-mouse-cursor">this question</a>, and I think I finally found a solution, but it runs too slow.</p>
  
  <pre><code>var $div = $('&lt;div&gt;')
      .css({ 'border': '1px solid red', 'position': 'absolute', 'z-index': '65535' })
      .appendTo('body');
  
  $('body *').live('mousemove', function(e) {
      var topElement = null;
      $('body *').each(function() {
          if(this == $div[0]) return true;
          var $elem = $(this);
          var pos = $elem.offset();
          var width = $elem.width();
          var height = $elem.height();
          if(e.pageX &gt; pos.left &amp;&amp; e.pageY &gt; pos.top
              &amp;&amp; e.pageX &lt; (pos.left + width) &amp;&amp; e.pageY &lt; (pos.top + height)) {
              var zIndex = document.defaultView.getComputedStyle(this, null).getPropertyValue('z-index');
              if(zIndex == 'auto') zIndex = $elem.parents().length;
              if(topElement == null || zIndex &gt; topElement.zIndex) {
                  topElement = {
                      'node': $elem,
                      'zIndex': zIndex
                  };
              }
  
          }
      });
      if(topElement != null ) {
          var $elem = topElement.node;
          $div.offset($elem.offset()).width($elem.width()).height($elem.height());
      }
  });
  </code></pre>
  
  <p>It basically loops through all the elements on the page and finds the top-most element beneath the cursor.</p>
  
  <p>Is there maybe some way I could use a quad-tree or something and segment the page so the loop runs faster?</p>