Я не продвинутый пользователь CSS, но у меня есть достойные рабочие знания, я полагаю. Я пытаюсь сделать неупорядоченный список, который использует разные значки для каждого элемента списка. Я также хотел бы, чтобы цвет фона элемента списка изменялся при наведении.
Есть ли способ сделать это с помощью CSS, или вы просто включите образ значка в элемент списка (например, ниже)?
<li><img src="voters.jpg"><a href="voters.html">Voters</a></li>
Использование стиля list-style на уровне ul делает все значки одинаковыми, и я не смог найти другой способ. Большинство примеров, которые я нашел, показывают, как использовать изображения в списке, но только если маркированные изображения одинаковы. Я определенно открыт для предложений и улучшений в том, как я пытаюсь это сделать.
спасибо
<div class="content-nav">
<ul>
<li class="instructions"><a href="instructions.html">Instructions</a></li>
<li class="voters"><a href="voters.html">Voters</a></li>
</ul>
</div>
.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;
}