我不是CSS的高级用户,但我有一个体面的工作知识,我想。我试着做一个无序列表,为每个列表元素使用不同的图标。我还想在悬停时更改列表元素的背景颜色。你可以在无序列表中为每个列表元素使用不同的图标图像吗?
有没有办法通过CSS来做到这一点,或者你会在列表元素(如下图)中包含图标图像?
Voters使用列表样式图像在UL水平,使所有的图标相同,我一直没能找出另一种方式。我发现的大多数例子都会教你如何在列表中使用图像,但只有在符号图像相同的情况下。我非常乐于接受我试图做到这一点的建议和改进。
感谢
.content-nav {
font-size:12px;
width:160px;
z-index:0;
}
.content-nav ul {
padding:0 20px;
margin:30px 0;
}
.content-nav li {
padding:5px;
margin:5px 5px;
}
.content-nav li a {
color:#666;
text-decoration:none;
}
.content-nav li.voters a {
background:#FFF;
color:#666;
text-decoration:none;
list-style-image:url(images/voters.jpg);
}
.content-nav li.voters a:hover {
background:#0CF;
color:#000;
}
.content-nav li.instructions a {
background:#FFF;
color:#666;
text-decoration:none;
list-style-image:url(images/voters.jpg);
}
.content-nav li.instructions a:hover {
background:#0CF;
color:#000;
}
2011-04-18
Patrick
+0
你目前正在申请'名单样式图像“到'a'元素而不是'li'元素,所以这是行不通的。 –
2011-04-18 18:27:10
+0
我要调整背景图像,但感谢提示。 –
2011-04-18 18:47:06