title: Jquery - Outline top element while hovering
body: <p>I'm trying to outline the top element being hovered.</p>
  
  <pre><code>    $(function()
      {
        var ElementSelector = null;
        var SelectedElement = null;
  
        $("*:not(div#ElementSelector)").hover
        (
          function()
          {
            SelectedElement = ($(this).length &gt; 1 ? $(this).find("*:last") : $(this));
            if(ElementSelector != null)
            {
              ElementSelector.css("width", SelectedElement.width()).css("height", SelectedElement.height())
                .css("left", SelectedElement.offset().left).css("top", SelectedElement.offset().top)
                .css("marginTop", SelectedElement.css("marginTop")).css("marginLeft", SelectedElement.css("marginLeft"))
                .css("marginRight", SelectedElement.css("marginRight")).css("marginBottom", SelectedElement.css("marginBottom"))
                .css("paddingLeft", SelectedElement.css("paddingLeft")).css("paddingTop", SelectedElement.css("paddingTop"))
                .css("paddingRight", SelectedElement.css("paddingRight")).css("paddingBottom", SelectedElement.css("paddingBottom"));
            }
  
            SelectedElement.click(function()
            {
              SelectedElement.css("background-color", "green");
            });
          }, 
          function ()
          {
            SelectedElement.unbind("click");
          }
        );
  
        $("body").append("&lt;div id='ElementSelector' style='width:0px;height:0px;z-index: 100000;position:absolute;border: 2px solid red;padding:0px;margin:0px;margin:0px;'&gt;&lt;/div&gt;");
        ElementSelector = $("div#ElementSelector");
      });
  </code></pre>
  
  <p>This is what I've come up with so far.. But it bugs a lot! So any ideas?</p>