CODEWITHSUNDEEP
jquerycss
temporary_user_name
temporary_user_name

Reputation: 37018

CSS not applying properly after jQuery manipulation?

I have an image that swaps out for a smaller image when you click it, like a button being depressed, via this rule:

div#about.mouseDown {
    background: transparent url("../resources/about_down.png") no-repeat top left;
}

To keep it from staying that way if someone clicks and moves the mouse out of the div, I have this:

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

However, once that is called (once you move your mouse into and then out of the div in question) the CSS rule above ceases to apply. I checked in the inspector, and it's simply no longer being applied.

Why could that be?

Upvotes: 0

Views: 71

Answers (2)

yckart
yckart

Reputation: 33378

The problem is, that jQuery adds the style via inline-code so your div becomes something like this:

<div id="about" class="mouseDown" style="background: transparent url('../resources/about_down.png') no-repeat top left;"></div>

To make your css work again, you've to use !important (what I can't recommend):

div#about.mouseDown {
    background: transparent url("../resources/about_down.png") no-repeat top left !important;
}

or to put the css into a js-function too:

$("#about").mousedown(function(){
    this.style.background = "transparent url('/resources/about_down.png') no-repeat top left";
});

Update

Another good point: CSS not applying properly after jQuery manipulation?

Upvotes: 3

Ford
Ford

Reputation: 2597

I think you want

$("#about").mouseleave(function(){
    $(this).css("backgroundUrl", "url('/resources/about.png')");
}).mouseenter(function(){
    $(this).css("backgroundUrl", "url('../resources/about_down.png')");
});

Upvotes: 0

Related Questions