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

Question

所以我无法弄清楚这一点。如果你去这个链接： http: //www.pandashan.com/us/你会注意到它会悬停在选定的链接上，但是背景图片是这样的：http: //www.pandashan.com/us/设计3/img/menu.png

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

希望你明白我在说什么。

谢谢

Answer 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;}