0

我是一名设计专业的学生，​​我的网页设计课程即将结束。我正在处理我的最后一个站点，但我遇到了精灵问题（我们在一节课上讨论过，我跟着，但现在我似乎无法弄清楚）。这是我第一次尝试在我为班级制作的网站上使用精灵。无论如何，我已经查看了一些带有教程的网站，并且我已经设法让事情到目前为止工作......这是我的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;
}

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

谢谢，

迈克尔

4

1 回答 1

0

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

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

在这种情况下，cssnav 是您的班级 ID

编辑：您可能还想在您的问题中添加“css”标签

于 2009-12-14T21:23:34.500 回答