基本精灵的一些帮助

时间:2009-12-14 20:59:31

标签: hover sprite

我是一名设计专业的学生,​​我的网页设计课程结束了。我正在我的最后一个网站上工作,但是我遇到精灵问题(我们在一个课程中遇到了一些问题,我遵循了这个问题,但现在我似乎无法弄明白)。这是我第一次尝试将sprite用于我正在为课堂制作的网站。 无论如何,我已经查看了一些有教程的网站,我已经设法让这些工作到目前为止......这是我的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;
}

对于粗略显示的代码表示不满;我无法弄清楚如何正确显示它。 我的设置方式出了什么问题? 在这里,链接工作,我可以担心以后隐藏文本链接。但是,我无法弄清楚如何为列表中的每个项目应用悬停图像。

谢谢,

迈克尔

1 个答案:

答案 0 :(得分:0)

你会想要更像的东西:

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

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

编辑:您可能还想在问题中添加“css”标记