Latest Lists - How do I show an image before the number in an ordered list using a:hover?

How do I show an image before the number in an ordered list using a:hover?

I have a sidebar using an ordered list. My intent is that when the client hovers over a link, an arrow shows up to the left of the entry, before the ordered list number. Usually without ordered lists this would be a simple procedure - I would just take the link, add some padding on the left, and then set a background image on a:hover so that when the client hovers over the link, the background image of the arrow shows up to the left. However I'm running into problems because ordered lists don't quite work the way I want them to. Let's assume I have the following code: <body> <ol> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ol> </body> Outputs something like this: 1. Link 1 2. Link 2 I want the CSS such that it will display like this on hover: -> 1. Link 1 2. Link 2 (of course they'll still be in line because it's an OL) I just can't seem to find a way to display the background image shown by a:hover before the ordered list number. What I get is this: 1. ->Link 1 2. Link 2 Any insights would be greatly appreciated. I know that changing the whole thing to an unordered list, and then manually numbering everything is an option, but I'd rather not go there for design purposes.

Public Comments

If you know Javascript, you could insert an image of an arrow and use an onmouseover event handler to toggle the visibility. I don't think you can do that with CSS, though I may be mistaken. Correct syntax: function make_visible() { document.getElementById(obj).style.display = ''; } function make_invisible() { document.getElementById(obj).style.display = 'none'; } <li onmouseover="make_visible();" onmouseout="make_invisible();">Whatever is in the list</li>