CODEWITHSUNDEEP
jquerycss
Maurice
Maurice

Reputation: 1092

Toggle list-style-image via jQuery

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)"});

Upvotes: 1

Views: 6561

Answers (2)

Jason Gennaro
Jason Gennaro

Reputation: 34855

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/

Upvotes: 3

Alex
Alex

Reputation: 9471

You should list-style-type on the ul, not li element.

Try using camelCase on the css property. From the docs on .css():

Shorthand CSS properties (e.g. margin, background, border) are not supported. For example, if you want to retrieve the rendered margin, use: $(elem).css('marginTop') and $(elem).css('marginRight'), and so on.

So use:

$('ul').css('listStyleType', 'square');

Upvotes: 0

Related Questions