Question

我目前正在处理个人游戏项目的小型目标网页。我想要一个很好的链接：悬停效果，所以我使用：after元素将三角形定位在链接上方，但定位不起作用。

我把代码放在jsfiddle上。

目前，三角形位于绝对位置，这适用于大量教程，但它不适用于我的span-elements。

Answer 1

不要忘记将position: relative设置为<span>元素：

span.linktopbar {
    ...
    position: relative;
}

另外，我设置display: inline-block以防止在悬停时显示滚动条。

Answer 2

它总是在中间的原因是因为linktopbar.xi总是从包含所有锚元素（div.footer）的包含div获取其绝对位置。你已经给出了.xi元素：50％这意味着它将获得第一个包含position：relative的元素，并根据元素x，y和amp;宽度。

你需要给每个锚元素一个xi OR你需要使用一些.js来计算元素的.position（）（在jQuery中），然后调整.xi left属性值