CODEWITHSUNDEEP
jquerycss
temporary_user_name
temporary_user_name

Reputation: 37038

How to change background attribute with jQuery?

This quite simply does not work for me! 

$("#about").mouseleave(function(){
                $("#about").css("background", 'transparent url("../resources/about.png") no-repeat top left;');
            });

I have a div working as a button, when clicked it opens a window. More relevantly, when clicked its background is swapped out for a smaller image via css .mouseDown in order to give the impression of a button being depressed.

But I'm trying to make it automatically go back to the bigger image if you drag the mouse out of the div without releasing the click. As it is, it just stays as the smaller image. It's an edge case, but I want to fix it.

Why doesn't the above code work? I tried .prop, .css....I don't know what I'm doing wrong.

Upvotes: 0

Views: 86

Answers (4)

codebear22
codebear22

Reputation: 1877

You should delete top left styles. It's works for me very fine.

Upvotes: 1

Yotam Omer
Yotam Omer

Reputation: 15356

You need to use .css() and also take out the semicolon from the value you want to assign:

$("#about").mouseleave(function(){
     $("#about").css("background", 'transparent url("../resources/about.png") no-repeat top left');
});

Upvotes: 1

PSL
PSL

Reputation: 123739

You need to use css instead of attr. background is not a property of the element itself but it is a css property for the element. And remove the semi column at the end of the css prop value.

$(this).css("background", 'transparent url("../resources/about.png") no-repeat top left');

Fiddle

Upvotes: 1

adeneo
adeneo

Reputation: 318182

background is not an attribute, but css :

$("#about").mouseleave(function(){
    $(this).css('background', 'transparent url("../resources/about.png") no-repeat top left');
});

Upvotes: 1

Related Questions