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

我试图在我的投资组合上编码我的导航，并且正在寻找比使用背景位置和css精灵更简单的方法。a：悬停 - 在文本导航中使用图像

基本上我需要类似于这个网站的导航：http://www.ernesthemingwaycollection.com/当你将鼠标悬停在导航上时，它下面会出现一个条。

是否有一个更简单的方法来做到这一点，或者我必须使用背景定位。

顺便说一句，我用文本作为我的导航，宁愿保持它的方式，而不是使用图像的导航。我只想为悬停图片使用图片。我试图简单地通过使用下面的代码来做到这一点：

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

但是，我似乎无法定位图像？任何帮助？

在此先感谢！

来源

2010-08-15 MozazDesign

你是什么意思“定位图像”？你能澄清一点吗？为背景提供一个位置或单独使用背景位置是如何移动元素中的背景，但我不确定从描述中究竟遇到什么问题。 – 2010-08-15 13:01:32

对不起。我的意思是Nav_Hover.png图片。我似乎无法改变它在页面上的位置，按边距等。 – MozazDesign 2010-08-15 13:09:29

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

其中10px是水平定位和20px的垂直。或仅使用background-position如前所述。

来源

2010-08-17 09:36:23 Jasper

完美！非常感谢Psy！：d – MozazDesign 2010-08-17 20:28:03

您不必使用精灵，但由于以下几个原因，它通常更高效。

你可以只使用一个完全不同的图像，例如：

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

但是要注意，因为它加载图像在第一时间（用于远程用户有可能在悬停稍有延迟，你赢了在本地没有延迟注意到这一点）...所以你可能想要预先加载这些悬停图像。这是由自然界精神照顾的东西，所以完全不要把它们作为一个选项抛出......有资源来帮助创建它们，如果这是关注。

来源

2010-08-15 12:50:07

正如Nick所说，延迟和预加载还会增加浏览器发出的HTTP请求数量，从而减慢加载时间。 – Sam152 2010-08-15 12:55:01

为了解决您的问题，我认为使用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，但我不会这样做的悬停。

来源

2010-08-15 15:41:01 no1cobla

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

回答

相关问题