对基本的精灵内容有一点帮助

Question

我是一名设计专业的学生，​​我的网页设计 I 课程即将结束。我正在开发我的最后一个网站，但我在精灵方面遇到了麻烦（我们在一堂课上讨论过这一点，我遵循了这一点，但现在我似乎无法弄清楚）。这是我第一次尝试在我为班级制作的网站中使用精灵。 不管怎样，我已经浏览了一些带有教程的网站，到目前为止我已经成功地让事情正常工作了……这是我的 html（用于导航）：

  [ul id="list"]
    [li id="home"][a href="index.html"]home[/a][/li]
    [li id="profile"][a href="profile.html"]profile[/a][/li]
    [li id="work1"][a href="work-1.html"]1[/a][/li]
  [/ul]

这是 CSS：

nav  {
  display:block;
  position: absolute;
  right:0;
  top: 0;
  z-index:2;
}

list {
  background: url("../images/sprite-1.gif") no-repeat;
  list-style: none;
  width: 200px;
  height:250px;
  margin:0;
  padding:0;
}

list li, list a {
  display:block;
  height:25px;
}

home a:hover {
  display:block;
  height:25px;
  background-position:0px 75px;
}

抱歉代码的显示很粗糙；我不知道如何正确显示它。 我的设置方式有什么问题吗？ 在这里，链接有效，我可以担心稍后隐藏文本链接。但是，我不知道如何为列表中的每个项目应用悬停图像。

谢谢你，

迈克尔

Answer 1

你会想要更多类似的东西：

.cssnav img {width: 100%; height: 100%; border: 0; }
* html a:hover {visibility:visible}
.cssnav a:hover img{visibility:hidden}

在这种情况下 cssnav 是你的类 id

编辑：你可能还想将“css”标签添加到你的问题中