Question

我正在努力使用CSS中的锚（特别是：hover）标记。这是我的JSFiddle：

基本上我有一个带有自定义图像的导航栏（在小提琴中我摆脱了它，因为我只是想了解语法和排队）。导航栏是div，我在导航栏上有五个链接，它们都是嵌套的div。

为了使每个嵌套的div链接（我将整个div作为链接），我添加了一个透明的png作为背景图像并设置了链接到背景图像，因此导航栏自定义图像仍然显示然后你可以点击导航栏上的链接。

现在，我正在尝试为每个导航栏元素制作悬停/翻转图像。翻转时，它显示新图像，但它完全错误对齐（向下和原始图像的右侧）。在我的小提琴上，我使用了代码，但不是我正在使用的图像，我只是使用边框进行对齐。您可以在示例中看到红色框（这是锚点）由于某种原因没有与div排列。这正是我尝试实现它时悬停图像显示的位置。

有什么想法吗？谢谢！

Answer 1

如果您为链接添加相同的尺寸，它应该可以正常工作：

#homelink a{
    border:1px solid red;
    width: 200px;
    height: 40px;
    display:inline-block;
}

Answer 2

你需要给<a>一个显示块和一些行高度，如下所示：

#homelink a {
border: 1px solid red;
display: block;
line-height: 10px;
}

它将与div对齐。顺便说一下，你需要使用UL LI结构。

尝试实现：使用自定义图像悬停在导航栏上

2 个答案: