html - :hover - using images in text navigation

Question

我正尝试在我的投资组合中编写我的导航代码，并且正在寻找一种比使用背景位置和 css Sprite 更简单的方法。

基本上我想要类似于这个网站的导航:http://www.ernesthemingwaycollection.com/当您将鼠标悬停在导航上方时，下方会出现一个栏。

是否有更简单的方法来执行此操作，还是我必须使用后台定位。

顺便说一句，我已经使用文本作为我的导航并且宁愿保持这种方式而不是使用图像进行导航。我只想将图像用于悬停图像。我试图通过使用以下代码来简单地做到这一点:

#nav a:hover {
background: url('Images/Nav_Hover.png') no-repeat;
}

但是，我似乎无法定位图像？有帮助吗？

提前致谢!

Answer 1

您不必使用 sprite，尽管出于多种原因它通常更有效。

您可以使用完全不同的图像，例如:

a { background: url('image.jpg'); }
a:hover { background: url('image-hover.jpg'); }

请注意，悬停在第一次加载图像时可能会有轻微延迟(对于远程用户，您不会在本地没有延迟地注意到这一点)...因此您可能需要预加载这些悬停图像。这是 sprite 天生会处理的事情，所以不要完全将它们作为一个选项扔掉......如果担心的话，有资源可以帮助创建它们。