Jquery - 悬停时概述顶部元素答案

【问题标题】：Jquery - Outline top element while hoveringJquery - 悬停时概述顶部元素
【发布时间】：2009-07-06 20:28:01
【问题描述】：

我正在尝试勾勒悬停的顶部元素。

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

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

【问题讨论】：

“它有很多错误”是什么意思？上面的代码有效吗？您可以尝试在 jsbin.com 上发布示例吗？
你能澄清一下吗？ “它有很多错误”是什么意思？
很抱歉没有太清楚“什么错误”。我们会选择选择器，但有时它会卡住。而其他时候，尺寸不会相加。你可以在这里看到它的实际效果：jsbin.com/arexi
我最近有一种强烈的感觉，不愿意调试自己的代码的人希望他们在这里复制过去后由其他人来完成。
来吧，这只是低。我不只是复制粘贴的代码。我已经要求别人看看它。因为我已经用谷歌搜索、调试、测试并盯着它看了几个小时，但没有找到任何东西。像这样的论坛通常是我最后的选择。我不希望有一些便宜的代码，我希望有人说，嘿，你刚刚错过了这个。或这个”。或者，这不是计算正确尺寸的方法，请改用此方法。这就是我所追求的。所以，请为别人省气。

标签： jquery hover element

【解决方案1】：

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

【讨论】：

由于这只是一个测试，我忽略了层分离。这当然会在以后清理。
我认为“错误很多”是指代码很乱，您想知道如何清理它。

【解决方案2】：

你总是可以使用.hover？

我强烈建议清理您的代码并按照 Mark 所说的去做并将样式放入样式表中。仅在使用 jQuery 时才有意义，它可能会变得一团糟。

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

整个附加的东西没有任何意义，你为什么不使用jQuery's CSS functions来设置呢？这就是他们的目的。

【讨论】：