Question

我正在为位于窗口底部的网站进行原型导航。当我将鼠标悬停在一个链接上时，div会出现在带有子链接的naivigation上方，但是它不会位于导航中悬停链接的中心上方。我已经尝试使用css来定位它-50％但是它有很大的影响[看起来它只移动父母大小的50％]，我该如何使用jQuery？

注意：我也在使用hoverIntent。

Answer 1

替换位置（固定）1像素宽的容器div，然后将内部元素（实际项目）偏移其绝对宽度的一半。这个技巧对我有用。

<强> HTML：

  <style type="text/css">
    #testnav-container {
      position:fixed;
      bottom:0;
      left:50%;
      width:1px;
      border:1px solid red;
      text-align:center;
    }
    #testnav {
      height:20px;
      width:100px;
      background:blue;
      margin-left:-50px;
    }
  </style>
  <div id="testnav-container">
    <div id="testnav">test navigation bar</div>
  </div>

容器div上的1px边框只是为了告诉你在哪里。试一试，告诉我它是怎么回事。

要在控制台中运行的Snippet jQuery示例：

var foo = $('<div style="position:fixed;bottom:0;left:50%;width:1px;border:1px solid red;text-align:center;"><div style="height:20px;width:100px;background:blue;margin-left:-50px">test navigation bar</div></div>').appendTo('body');

在jquery中将子位置调整到父级的中心

1 个答案: