Question

How can i toggle the list-style-image via jQuery?

I first tried to change the list-style-image, but that won’t work. Does anybody know what i’m doing wrong here?

[..]
$(this).closest('li').css("list-style-image","url('../Images/arrowDown.png')");

I also tried the following, but without the desired result

$(this).closest('li').css("list-style-image","url(arrowDown.png)");

and

$(this).closest('li').css({"list-style-image":"url(arrowDown.png)"});

Answer 1

list-style-image is set on the ul, so if you are trying to have the bullet image change on the hover, it will not work… each hover will trigger all the bullets switching.

If you want to change the bullets on the hover on each li then you need to add it as a background-image. So something like this

$('li').hover(
    function(){
     $(this).removeClass('up').addClass('down');
    },
    function(){
     $(this).removeClass('down').addClass('up');
    }    
);

Example: http://jsfiddle.net/jasongennaro/SZzRm/