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？

我会建议清理你的代码并做Mark所说的并将样式放在样式表中。只有在使用jQuery时它才有意义，它可能会变得非常混乱。

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

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

Jquery - 悬停时概述顶部元素

2 个答案: