JQuery将一个元素相对定位到另一个元素

Question

<div class="bgdiv"></div>
<div class="fgdiv"></div>

<a href="#" class="mainlink">LINKA</A>

bgdiv根本没有样式，因此需要分配这些和ZIndex（其他已经具有z-index属性）然后需要分配高度和宽度，其大于“x”的像素量大于链接A

然后bgdiv将位于链接A后面和fgdiv前面，以便bgdiv直接围绕链接（视觉上），具有与填充相似的效果。

有没有人对如何实现这一点有任何想法？

编辑：

所以上图就像我刚刚点击了登录按钮一样。 最初位于灰色矩形链接surrounder div后面的绿色条形div现在已经“向上移动了一层”，但仍然在文本“登录”后面

Answer 1

考虑一个展平的背景图像（绿色条和正方形都在同一图像中）。 将背景图像组合成4个部分（或者更好地使用单个精灵）。

每种颜色基本上需要'开'和'关'状态（因此4件）。然后你可以将它们分配给一个单独的CSS类（.gray-on，.gray-off）并为每个a元素切换类。

例如，灰色bg图像看起来像这样：

Answer 2

我来到这里http://jsfiddle.net/sgamt/但我真的不喜欢它。