用於導航的圖像精靈

我正在嘗試將此圖像用於導航，但這是我第一次使用精靈進行操作，但似乎無法使其工作。主圖像顯示出來，但懸停狀態不起作用，並且光標不表示它們甚至是鏈接。我知道還有其他方法可以在不使用圖像精靈的情況下做到這一點，但爲了排除故障，只需假裝它們不存在即可。用於導航的圖像精靈

我是一個noob，當涉及到HTML和CSS也沒有任何幫助。如果有人能告訴我我是多麼愚蠢，我將不勝感激！

（它不會讓我張貼的圖片）

<nav> 
    <ul id="main-navigation"> 
     <li id="home"><a href="http://www.andrewblike.com/home.shtml" title="Home">Home</a></li> 
     <li id="videos"><a href="http://www.andrewblike.com/video.shtml" title="Videos">Videos</a></li> 
     <li id="recentWork"><a href="http://www.vimeo.com/andrewblike" title="Recent Work">Recent Work</a></li> 
     <li id="bio"><a href="http://www.andrewblike.com/bio.shtml" title="Film Maker's Bio">Bio</a></li> 
     <li id="castingCall"><a href="http://www.andrewblike.com/casting.shtml" title="Casting Call">Casting Call</a></li> 
     <li id="contact"><a href="http://www.andrewblike.com/contact.shtml" title="Contact Me">Contact Me</a></li> 
    </ul> 
</nav>

/CSS/

nav { 
width: 100%; 
} 

#main-navigation { 
background: url('images/nav_sprite2.jpg') no-repeat; 
width: 612px; 
height: 44px; 
margin-left:auto; 
margin-right:auto; 
} 

#main-navigation li, #mainNavigation a { 
height: 45; 
display: block; 
} 

#main-navigation li { 
float: left; 
list-style: none; 
display: inline; 
text-indent: -9999em; 
} 

#home { width: 53px; } 
#videos { width: 64px; } 
#bio { width: 29px; } 
#recentWork { width: 127px; } 
#castingCall { width: 125px; } 
#contact { width: 116px; } 

#home a:hover { background:url('images/nav_sprite2.jpg') 0px -45px no-repeat; } 
#videos a:hover { background:url('images/nav_sprite2.jpg') -53px -45px no-repeat; } 
#bio a:hover { background:url('images/nav_sprite2.jpg') -157px -45px no-repeat; } 
#recentWork a:hover { background:url('images/nav_sprite2.jpg') -204px -45px no-repeat; } 
#castingCall a:hover { background:url('images/nav_sprite2.jpg') -351px -45px no-repeat; } 
#contact a:hover { background:url('images/nav_sprite2.jpg') -496px -45px no-repeat; }

/結束CSS/

來源

2012-03-04 user1248126

有一個如何做到這一點在這裏一個很好的例子：http://www.w3schools.com/css/css_image_sprites.asp – 2012-03-04 17:09:48

有幾個問題與您的CSS代碼：

#mainNavigation a應該#main-navigation a
#main-navigation li分配display:inline後來display:block。您需要後者在這種情況下爲A元素是一樣高的LI元素..
height:45應該height:45px
我認爲你需要走這條線了：text-indent: -9999em;
在這些#id a:hover規則中只使用background-position並將background: url(...) no-repeat置於#main-navigation a:hover的規則中會更好。

來源

2012-03-04 17:35:07 juanrpozo

同意 - 但如果你只是解決上述的第一個（＃你的代碼將工作mainNavigation a）... – 2012-03-04 17:48:40

用於導航的圖像精靈

回答

相關問題