Jquery - 悬停时概述顶部元素

Question

我试图勾勒出悬停在顶部的元素。

    $(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");
    });

这是我到目前为止所想出的..但它有很多错误！ 那么有什么想法吗？

Answer 1

为什么不使用CSS和jQuery的addClass、removeClass和toggleClass函数而不是在代码中指定所有样式呢？ 这应该会大大清理您的代码，并将演示文稿放在它所属的位置 - 样式表中。

Answer 2

您始终可以使用 .hover 吗？

我强烈建议清理您的代码并按照马克所说的操作并将样式放入样式表中。 它只有在使用 jQuery 时才有意义，它可能会变得非常混乱。

如果您第一次就以正确的方式完成了它，那么测试您的代码会容易得多，并且您将有一个更好的基础来开始，事实上您的“测试”可能会成为最终产品。

整个追加事情没有任何意义，为什么不使用 jQuery 的 CSS 函数 设置它？ 这就是他们存在的目的。