1

我目前正在为我的个人游戏项目制作一个小型登录页面。我想要一个不错的链接：悬停效果，所以我使用 :after 元素在链接上方定位一个三角形，但定位不起作用。

我将代码放在jsfiddle上。

目前三角形是绝对定位的，这在大量教程中工作，但它不适用于我的跨度元素。

4

2 回答 2

0

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

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

另外，我设置display: inline-block为防止在悬停时出现滚动条。

于 2012-07-14T11:47:49.560 回答
0

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

您需要给每个锚元素一个 xi 或者您需要使用一些 .js 来计算元素的 .position() （在 jQuery 中），然后调整 .xi 左属性值

于 2012-07-14T11:56:45.077 回答