CODEWITHSUNDEEP
javascriptjquery
shan
shan

Reputation: 3145

jquery and multiple css3 backgrounds

trying to make a frustrating bit of code function correctly seeing as jquery doesn't include multiple background functionality yet.

I have an image whose background I need to add another to on an event. Unfortunately, when I do the event the background appears over the other one (good!) but the jquery code is refreshing the old image as well, making a white flash appear on the event.

Is there any way I could make this code function so that when the event is triggered, the old background remains and the new one is just added on?

$('#box').hover(function () {
    $('#slide').css("background", "url('bg_top.png') no-repeat center,
    url('bg_bottom.jpg') no-repeat center");
});

The event won't actually be a hover in the final version, just using for testing (so no css:hover stuff :-( )

Thanks for any help! :-)

Upvotes: 0

Views: 39

Answers (1)

Praveen
Praveen

Reputation: 56509

I would rather suggest you to use it separate in a separate class like

.hovered {
background: url('bg_top.png') no-repeat center,
            url('bg_bottom.jpg') no-repeat center;
}

JS:

$('#box').hover(function () {
    $('#slide').addClass('hovered');
}, function () {
    $('#slide').removeClass('hovered');
});

This won't affect the existing background.

Upvotes: 1

Related Questions