Question

我正在尝试使用此图像进行导航，但这是我第一次使用精灵，我似乎无法让它工作。主图像显示但悬停状态不起作用，并且光标不表示它们甚至是链接。我知道还有其他方法可以在不使用图像精灵的情况下执行此操作，但为了排除故障，只需假装它们不存在。

对于html和css来说，我是一个noob，它对任何一个都没有帮助。如果有人能告诉我我有多愚蠢，我会非常感激！

（它不让我发布图片）

<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 /

Answer 1

您的CSS代码有几个问题：

#mainNavigation a应为#main-navigation a
#main-navigation li被分配display:inline，后来被display:block分配。在这种情况下，您需要后者A元素与LI元素一样高。
height:45应为height:45px
我认为您需要排除这一行：text-indent: -9999em;
最好只在background-position规则中使用#id a:hover，并将background: url(...) no-repeat放在#main-navigation a:hover的规则中。

用于导航的图像精灵

1 个答案: