Html 使用CSS精灵？

我正在尝试使用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 a:hover img

你应该写：

.navi a:hover img

---

您的第一个样式是

.navi a

，但是您正在编写：

navi a:hover img

。这意味着第二种样式将应用于悬停链接中的每个图像，该链接位于

元素内，而不是具有类名

navi

的元素内

因此，不是：

navi a:hover img

你应该写：

.navi a:hover img

---

哈哈，我花了这么长时间看这个。我讨厌它这么简单@杰克：我也花了一些时间才注意到丢失的圆点。这就是为什么我更喜欢每行写一种风格：这样更容易注意到这样的打字错误。哈哈，我花了这么长时间看这个。我讨厌它这么简单@杰克：我也花了一些时间才注意到丢失的圆点。这就是为什么我喜欢每行写一种风格：这样更容易注意到这样的打字错误。