创建 CSS Sprite :hover 滚动图像链接

我有一个问题希望能得到答案。我正在尝试从头开始创建一个网站（不使用 Dreamweaver、Expression Web 等），我只使用记事本。我想要完成的是在标签内创建两个导航链接作为翻转 CSS 精灵图像（使用伪类元素：hover），我稍后希望在页面中移动它们。上周我花了整整一周的时间试图解决这个问题，但没有成功。我去过 www.w3schools.com 和这个网站来寻找解决方案，但似乎仍然无法让它正常工作。我也处于一个严格的环境中，只允许我在Win7操作系统上使用一种浏览器（IE8）。请原谅我糟糕的 CSS 编码；这是我第一次尝试。

目前我正在使用两个 HTML 链接，如下所示：

<div id="linkbox">
<ul class="GoogleFrame">
<li class="Google"><a href="www.google.com"></a></li>
</ul>
<ul class="BingFrame">
<li class="Bing"><a href="www.bing.com"></a></li>
</ul>
</div>

这是我在上面的 HTML 中使用的 CSS：

#linkbox {
  width: 312px;
  height: 388px;
  background: url('images/container.png');
  padding: 0px;
  margin: 0px;
  position: fixed;
  left: 0px;
  top: 410px;
  z-index: 1
}

.GoogleFrame {
  position:fixed;
  left: 10px; 
  top: 100px
}

.GoogleFrame li {
  list-style:none;
  position:absolute;
}

.GoogleFrame li, .GoogleFrame a {
  height:54px;
  display:block;
}

.Google {
  left:0px;
  width:260px;
  background: url('images/google.png') 0px 0px;
}

.Google a:hover {
  background: url('images/google.png') -261px 0px;
}

任何帮助或指导将不胜感激！

对于 CSS 精灵图像，您可以执行以下操作：

HTML

<ul>
    <li>
        <a href="#">text</a>
    </li>

    <li>
        <a href="#">text</a>
    </li>

    <li>
        <a href="#">text</a>
    </li>
</ul>

CSS

ul {width:100px;}
li { margin-bottom:5px; }
li a {
    text-indent:-9999em; /* hide our text */ 
    display:block; 
    height:40px; 
    background:url('http://placekitten.com/100/80') no-repeat 0 0; 
}

li a:hover { background-position:0 -40px;}

JSFiddle 演示 http://jsfiddle.net/9Py9m/

这个想法是，你有一张图像，你显示它的一半，然后使用:hover你可以改变background-position图像的on/off state