html更改无序列表的图标,你可以在无序列表中为每个列表元素使用不同的图标图像吗？...

我不是CSS的高级用户，但我有一个体面的工作知识，我想。我试着做一个无序列表，为每个列表元素使用不同的图标。我还想在悬停时更改列表元素的背景颜色。你可以在无序列表中为每个列表元素使用不同的图标图像吗？

有没有办法通过CSS来做到这一点，或者你会在列表元素(如下图)中包含图标图像？

Voters

使用列表样式图像在UL水平，使所有的图标相同，我一直没能找出另一种方式。我发现的大多数例子都会教你如何在列表中使用图像，但只有在符号图像相同的情况下。我非常乐于接受我试图做到这一点的建议和改进。

感谢

• Instructions
• Voters

.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