尝试使用自定义图像实现 a:hover On Nav Bar答案

【问题标题】：Trying To Implement a:hover On Nav Bar with Custom Images尝试使用自定义图像实现 a:hover On Nav Bar
【发布时间】：2012-06-10 23:53:32
【问题描述】：

我正在为 CSS 中的锚点（特别是：悬停）标签而苦苦挣扎。这是我的 JSFiddle：

http://jsfiddle.net/yXwng/

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

为了让每个嵌套的div链接（我把整个div都做成了链接），我添加了一个透明的png作为背景图片，并将链接设置为背景图片，因此导航栏自定义图片仍然显示您可以点击导航栏上的链接。

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

有什么想法吗？谢谢！

【问题讨论】：

标签： css html anchor

【解决方案1】：

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

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

【讨论】：

我建议你优化你的 CSS，这样你就不必重复所有属性 5 次：jsfiddle.net/yXwng/1
谢谢，这两个建议都很棒。我现在将使用类来处理悬停图像，而不是五个不同的 div id。更简洁，感谢您的建议！

【解决方案2】：

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

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

它将与 div 对齐。顺便说一句，您需要为此使用 UL LI 结构。

【讨论】：