我是一名设计专业的学生,我的网页设计课程结束了。我正在我的最后一个网站上工作,但是我遇到精灵问题(我们在一个课程中遇到了一些问题,我遵循了这个问题,但现在我似乎无法弄明白)。这是我第一次尝试将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;
}
对于粗略显示的代码表示不满;我无法弄清楚如何正确显示它。 我的设置方式出了什么问题? 在这里,链接工作,我可以担心以后隐藏文本链接。但是,我无法弄清楚如何为列表中的每个项目应用悬停图像。
谢谢,
迈克尔
答案 0 :(得分:0)
你会想要更像的东西:
.cssnav img {width: 100%; height: 100%; border: 0; }
* html a:hover {visibility:visible}
.cssnav a:hover img{visibility:hidden}
在这种情况下,cssnav是您的班级ID
编辑:您可能还想在问题中添加“css”标记