css - 尝试实现 :hover On Nav Bar with Custom Images

Question

我正在为 CSS 中的 anchor (特别是 a:hover)标签而苦苦挣扎。这是我的 JSFiddle:

http://jsfiddle.net/yXwng/

基本上我有一个带有自定义图像的导航栏(在 fiddle 中我去掉了它，因为我只是想了解语法并排列它们)。导航栏是一个 div，我在导航栏上有五个链接，它们都是嵌套的 div。

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

现在，我正在尝试为每个导航栏元素制作悬停/翻转图像。当我翻转时，它会显示新图像，但它完全错误地对齐(在原始图像所在的位置的下方和右侧)。在我的 fiddle 上，我使用了代码，但我没有使用我使用的图像，而是使用边框来对齐。您可以在示例中看到，由于某种原因，红色框(即 anchor )未与 div 对齐。这正是我尝试实现悬停图像时出现的位置。

有什么想法吗？谢谢!

Answer 1

如果您向链接添加相同的尺寸，它应该可以完美运行:

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