CSS List: Replacing Bullet with Image and Adding Hover

Question

I have an unordered list that looks like the following:

<ul>
<li><a href="test.html">Item 1<li>
<li><a href="test2.html">Item 2</li>
<li><a href="test3.html">Item 3</li>
</ul>

I want the bullet that appears to the left of each list item to be replaced by a right-facing triangle. The triangle, along with the text beside it, should change color on hover.

CSS can produce a triangle, but it appears choppy at smaller sizes. Therefore, I'm just looking for code that will allow me to edit the link location of two different triangle images.

Answer 1

First of all, your HTML is invalid (You need to close the anchor tags).

You can change the bullet image by using the list-style-image CSS property

ul { list-style-image: url('url-of-bullet1.png'); }

and you can change it on hover the same way, but by using the hover selector so it's only applied to the item the cursor is on:

ul li:hover { list-style-image: url('url-of-bullet2.png'); }

As for changing the text color, you can change it for the anchor elements by using the hover selector on the list items, like this:

ul li:hover a { color: #f00; }

Here's an example