ul li bullet point image doesn't work with when hovering over list links

Question

i want to make it so that when I hover the cursor over a link in the list, a bullet point image shows up to the left of the list text. however, it does not seem to work.

I've also tried the following CSS and it does not work:

ul.navibox a:hover{
list-style-image:url(images/crown-icon.jpg);}

any ideas? thanks

Current CSS:

ul.navibox{
margin:0 0 0 0;
padding:5px 0 0 20px;
list-style-type:none;
font-family:arial,verdana,helvetica,sans-serif;
font-size:14px;
color:#333333;}

ul.navibox li a:link{
color:#ff0;
text-decoration:none;}

ul.navibox li a:visited{
color:#f00;}

ul.navibox li a:hover{
color:#f0f;
list-style-image:url(images/crown-icon.jpg);}

HTML:

<div id="middle_left_box"><span style="padding-left:10px">Categories</span>
<h3>accessories</h3>
<h4>Supplies:</h4>
<ul class="navibox">
<li>Pellets</li>
<li>Gas</li>
<ul>
</div>

Answer 1

Without a Demo being provided it's hard to be sure but I would try this

ul.navibox{
margin:0 0 0 0;
padding:5px 0 0 20px;
list-style-image:none; /* default 'non-image' */
font-family:arial,verdana,helvetica,sans-serif;
font-size:14px;
color:#333333;}

ul.navibox li:hover{
list-style-image:url(images/crown-icon.jpg);}

ul.navibox li a:link{
color:#ff0;
text-decoration:none;}

ul.navibox li a:visited{
color:#f00;}

ul.navibox li a:hover{
color:#f0f;
}

Your previous CSS applied the list image to the anchor link which doesn't have that property available to it. So the hover has to be on the list item itself.

Answer 2

If you want to display a bullet aside <a> , you need to reset display of <a> to list-item . Then , on hover you may switched bullet image from a transparent one to an arrow or so.

CSS example and DEMO :

ul.navibox li a:link {
    color:#ff0;
    text-decoration:none;
    display:list-item;
    list-style-position:inside;
    list-style-image:url(http://dummyimage.com/16x16/fff/fff&text=);
}
ul.navibox li a:visited {
    color:#f00;
}
ul.navibox li a:hover {
    color:#f0f;
    list-style-image:url(http://dummyimage.com/16x16/fff/000&text=->);
}