使用CSS Sprites？

Question

我正在尝试使用css sprites做导航栏。我有图像，但现在只是代码的问题。目前它是：

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

我所有的工作都是正常的图像，高度是正确的，它会关闭图像的其余部分，但是当我悬停时它没有做任何事情。有什么建议？谢谢

Answer 1

你的第一个风格是.navi a，但是你写的是navi a:hover img。这意味着第二个样式应用于位于<navi />元素内的悬停链接内的每个图像，而不是位于具有类名navi的元素内。

所以而不是：

navi a:hover img

你应该写：

.navi a:hover img