0

这是我的代码：

HTML：

<div id="nav">
 <ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
 </ul>
</div>

CSS：

#nav ul li a {
 width:162px;
 background:url('http://i.imgur.com/DmeCv.png') -164px 0px;

#nav ul li:first-child a {
 width:164px;
 background:url('http://i.imgur.com/DmeCv.png');
}

#nav ul li:last-child a {
 background:url('http://i.imgur.com/DmeCv.png') -326px 0px;
}

到目前为止，一切都很好。这有效，并正确显示图像。

#nav ul li a:hover {
 background:url('http://i.imgur.com/DmeCv.png') -164px -50px;
}

#nav ul li:first-child a:hover {
 background:url('http://i.imgur.com/DmeCv.png') 0px -50px;

#nav ul li:last-child a:hover {
 background:url('http://i.imgur.com/DmeCv.png') -326px -50px;
}

然而，这不起作用。它显示中间部分悬停图像，而不是最后一个子悬停图像。

这是一个例子：

http://result.dabblet.com/gist/2973127/8bf204a16e7caca43ad129cad141fa4810bf18ce

4

1 回答 1

10

在您的 CSS 示例中，您}在first-child a:hover.

于 2012-06-22T14:45:16.850 回答