Donavon Decker
Donavon Decker

Reputation: 603

How do I make the hover effect over only the selected nav

So I can't figure this out. If you go to this link: http://www.pandashan.com/us/ you will notice that it will hover over the selected link, however the background image is this: http://www.pandashan.com/us/design3/img/menu.png

When it hovers, how is it only showing the link area, when in the image, the full nav bar is colored?

Hopefully you understand what I am saying.

Thank you

Upvotes: 1

Views: 469

Answers (1)

Pumpkinpro
Pumpkinpro

Reputation: 847

they use background-position on hover in 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;}

Upvotes: 2

Related Questions