我正在尝试使用CSS精灵创建导航栏。我有图像，但是这只是代码问题。目前是：
.navi a{
display:block;
float:left;
height:40px;
overflow:hidden;
background-position:left top;
}
navi a:hover img{
margin-top:-40px;
}
和html是：
<div class="topbar">
<img alt="title" src="title.png"/><br/>
<div class="navi">
<a href="index.html" class="home"><img src="home_up.png"/></a>
</div>
</div>
我所做的只是正常的图像，高度正确，并且裁剪了图像的其余部分，但是当我将鼠标悬停时，它什么也没做。有什么建议么？谢谢
最佳答案
您的第一个样式是.navi a，但是您正在编写：navi a:hover img。这意味着第二种样式将应用于<navi />元素内部而不是具有类名navi的元素内部的悬停链接内的每个图像。
所以代替：
navi a:hover img
您应该写：
.navi a:hover img
关于html - 使用CSS Sprites？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4356401/