Improve My CSS Roll Over Link List

I have created a 'link list' and the text in my links successfully changes weight and background when I roll over it. However I'd like to enhance it in the following ways:
- To include my bullet gif as part of the link
- To have a roll-over effect on my bullet (i.e change it to a different image)

Can I do this with just CSS or will I need Javascript?

(For my first reequest I tried just puting the <li> inside the <a> but that made it take up the whole width of the page)

The code I currently have, which works in Firefox and IE is reproduced below. My HTML simply has a <div id="class_link"> surrounding it.

Thanks in advance for any assistance.

SC

#link_list ul {
margin: 0px;
padding-top: 10px;
} 
 
#link_list li {
list-style-type: none;
background: url('bullet.gif') no-repeat top left;
height: 46px;
padding-left: 50px;
} 
 
#link_list li a:link {
font-weight: normal; 
font-size: 11pt; 
color: black; 
font-family: Arial; 
text-align: left; 
text-decoration: none;
}
 
#link_list li a:visited {
font-weight: normal; 
font-size: 11pt; 
color: black; 
font-family: Arial; 
text-align: left; 
text-decoration: none;
}
 
#link_list li a:hover {
font-weight: bold; 
font-size: 11pt; 
color: black; 
font-family: Arial; 
text-align: left; 
text-decoration: none;
background: yellow;
}
 
#link_list li a:active {
font-weight: normal; 
font-size: 11pt; 
color: black; 
font-family: Arial; 
text-align: left; 
text-decoration: none;
}

//mod edit: Please read the sticky topics on how to post code. I've added the necessary bbcode and moved this to css styling, a more appropriate forum. ~gt