li a:hover doesn't change style-type-image

[postcurser]

Can anyone tell me why this hover doesn't change image upon hovering:

.linkfarm ul {
margin: 0;
padding: 0;
line-height: 1.5em;
}
.linkfarm li {
list-style-image: url(gfx/li-a.png);
list-style-position: inside;
border-bottom: 1px dotted #232323;
width: 80%;
}
.linkfarm li:hover {
background-color: #eeeee7;
list-style-image: url(gfx/li-ahover.png);
}

well, it does change when I hover over the linked li's but it doesn't switch to the li-a.png image, instead it switches to the list-style-type disc instead, for reasons unknown to me.

Is it impossible to use a list style image as a hover?

Hope someone can clarify this for me :)

[Robin_reala]

Are you sure the image exists and is in the right place? If it can't find the image it'll drop back to the normal disc.

Also, this won't work in IEs 6 and below as they only support :hover on <a> elements.

[postcurser]

Yes, the image does exist. Is there something wrong with the code?

[Robin_reala]

Doesn't look like it.

[SuzyUK]

confirming .. nothing wrong with code, I tested with 2 images (8x8 gifs though) and it worked just fine..

postcurser, are you saying you see the first image, then when you hover you see the second, but then on mouseout the first one doesn't come back? or are you just not getting the first at all

try swapping the images in the CSS, what happens? and also which browser(s) is this happening in?

Suzy

[postcurser]

I see the first image (li-a.png), but when hovering I don't see the second image (li-ahover.png), instead I see the default li disc. When moving my mouse out again, I see the original image (li-a.png).

This happens in Opera - while in Firefox it works, so I guess that's the problem: Opera doesn't seem to support it. Guess I could have checked that before making a thread about it, but I just assumed that Opera would support it. Sorry :)

[doodlebee]

Did you see this resolution to this issue? I found a link to this very bug by googling it (don't think I can post the link, but...)

The problem:

li:hover { list-style-image: url(example.png); }
bug in Win32 8.0 (Build 7561)?

I'm trying to exchange a custom-image bullet point in my ul upon hovering the li. My CSS includes the following for this purpose:

li { list-style-image: url(test.png); }
li:hover { list-style-image: url(test_hover.png); }

which Opera 8.0 doesn't like, apparently. Instead of just ignoring it (which could be called graceful), it changes to the standard bullet upon hovering (disturbing).

Anything I can do?

The solution:

Something like this perhaps...?

li { list-style-type: none; }
li:hover { list-style-type: none; }
li:before { content: url(...); }
li:hover:before { content: url(...); }

The guy said this solution worked (but again, it won't in IE, because IE doesn't recognize pseudo-class elemnts in much more than the anchor tags. You can get it to work with a javascript - Son of Suckerfish provides one that works fine)

Hope that helps!

[postcurser]

Spectacular! Thanks a lot :)

[mongaseeka]

Hi! Just went throught this similar problem. The li hover works fine in Firefox but not ie. This solution worked for me for the most part. The bullet image changes as you hover in both ie and firefox.

#leftnav ul {
margin : 5px 5px;
padding : 0;
color : #fff;
text-align : left;
}
#leftnav li {
font-family : "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-weight : normal;
font-size : 1em;
padding-left : 0;
padding-bottom : 0;
line-height: 1.7em;
}
#leftnav li a {
background : url(img/circle_bullet.jpg) no-repeat 0 4px;
padding-left : 12px;
padding-bottom : 0;
}
#leftnav li a:hover {
background : url(img/circle_fill_bullet.jpg) no-repeat 0 4px;
}