Jquery - Outline top element while hovering

Question

Hi, I'm trying to outline the top element being hovered.

    $(function()
    {
      var ElementSelector = null;
      var SelectedElement = null;

      $("*:not(div#ElementSelector)").hover
      (
        function()
        {
          SelectedElement = ($(this).length > 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("<div id='ElementSelector' style='width:0px;height:0px;z-index: 100000;position:absolute;border: 2px solid red;padding:0px;margin:0px;margin:0px;'></div>");
      ElementSelector = $("div#ElementSelector");
    });

This is what I've come up with so far.. But it bugs a lot! So any ideas?

Answer 1

Instead of specifying all the styles in your code why not use CSS and jQuery's addClass, removeClass, and toggleClass functions? This should clean up your code quite a bit and put the presentation where it belongs - in the style sheets.

Answer 2

You can always use .hover?

I would heavily suggest cleaning up your code and doing what Mark said and putting the style within the style sheets. It only makes sense when working with jQuery, it can get to be quite a mess.

If you would have done it the right way the first time around, testing your code would be much easier and you would have a much better base to start from, in fact your 'test' would probably become the end product.

The whole append thing doesn't make any sense, why don't you set it using jQuery's CSS functions? That's what they're there for.