使用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