Question

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

基本上我希望导航类似于本网站的导航：http://www.ernesthemingwaycollection.com/当您将鼠标悬停在导航栏上时，会在其下方显示一个小节。

是否有更简单的方法可以做到这一点，还是必须使用背景定位。

顺便说一句，我已经使用文本作为我的导航，而宁愿保持这种方式，而不是使用图像进行导航。我只想将图像用于悬停图像。我尝试使用以下代码完成此操作：

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

然而，我似乎无法定位图像？有什么帮助吗？

提前致谢！

Answer 1

您不必使用精灵，但由于多种原因，它通常更有效。

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

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

请注意，在第一次加载图像时，悬停可能会略有延迟（对于远程用户，您不会在本地注意到这一点而没有延迟）...所以您可能需要预加载这些悬停图像。这是精神上的精神照顾，所以不要完全将它们作为一个选项扔掉......如果这是关注的话，有资源可以帮助创建它们。

Answer 2

为了回答你的问题，我认为在其中使用1个具有正常和悬停状态的图像，不仅是简单的方法，而且是最好的方法。没有预加载/延迟问题，没有浏览器问题（除了悬停不在ie6中工作）。

导航精灵非常简单。当您将其用于所有图像时，定位是Bia ***。将悬停图像设置为与最宽链接一样宽，并且一点点css将完成所有操作。

a.navLink { background:url(image) no-repeat; /* and ofcourse witdh and stuffs */ }
a.navlink:hover { background-position:0px -20px; /* height of button */ }

我不认为它可以更容易..不同的方式是使用javacript，但我不会这样做的悬停。

Answer 3

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

10px是水平定位，20px是垂直定位。或者只使用前面提到的background-position。

a：悬停 - 在文本导航中使用图像

3 个答案: