如何仅在选定的导航上制作悬停效果

【问题标题】：How do I make the hover effect over only the selected nav如何仅在选定的导航上制作悬停效果
【发布时间】：2013-06-05 06:21:52
【问题描述】：

所以我想不通。如果您转到此链接：http://www.pandashan.com/us/，您会注意到它会悬停在所选链接上，但是背景图像是：http://www.pandashan.com/us/design3/img/menu.png

当它悬停时，它如何只显示链接区域，当在图像中时，整个导航栏是彩色的？

希望你明白我在说什么。

谢谢

【问题讨论】：

标签： html css hover nav effect

【解决方案1】：

他们在 CSS 中悬停时使用背景位置

header nav ul li.home:hover {width:104px; background-position: 0px -86px;}
header nav ul li.register:hover {width:107px; background-position: -113px -86px;}
header nav ul li.account:hover {width:107px; background-position: -113px -86px;}
header nav ul li.connect:hover {width:170px; background-position: -220px -86px;}
header nav ul li.divider:hover {width:233px; background-position: -390px -86px;}
header nav ul li.forum:hover {width:92px; background-position: -623px -86px;}
header nav ul li.bugtracker:hover {width:133px; background-position: -715px -86px;}
header nav ul li.boutique:hover {width:120px; background-position: -848px -86px;}

【讨论】：