CODEWITHSUNDEEP
javascriptjquerycssbox-shadow
Chris
Chris

Reputation: 309

CSS box-shadow in jQuery .css()

Firefox 18 does not seem to recognize the -moz-box-shadow or the box-shadow CSS attribute.

If I use border-color, everything works fine.

$($this).hover(
    function () {
        //$(this).css('border-color', '#ff0');
        $(this).css('box-shadow', '10px', '10px', '5px', '#888');
        //$(this).css('-moz-box-shadow', '10px', '10px', '5px', '#888');
    }, function () {
        $(this).css('border-color', '');
        //$(this).css('border-width', '');
    }
);

What am I doing wrong?

Upvotes: 11

Views: 46884

Answers (5)

user4596341
user4596341

Reputation:

For Safari, Google Chrome and Opera use

$(this).css('-webkit-box-shadow', '10px 10px 5px #888');

For Mozilla Firefox use

$(this).css('-moz-box-shadow', '10px 10px 5px #888');

For other web browsers use

$(this).css('box-shadow', '10px 10px 5px #888');

Upvotes: 2

Harsha Biyani
Harsha Biyani

Reputation: 7268

It should be:

$(this).css('-webkit-box-shadow', '10px 10px 5px #888');
$(this).css('-moz-box-shadow', '10px 10px 5px #888');
$(this).css('box-shadow', '10px 10px 5px #888');

Upvotes: 4

Kevin Bowersox
Kevin Bowersox

Reputation: 94429

You need to make the arguments into one string literal. The value parameter of the css(property name, value) function is one argument.

 $(this).css('box-shadow', '10px 10px 5px #888');

Upvotes: 20

Aleks G
Aleks G

Reputation: 57306

This:

$(this).css('box-shadow', '10px', '10px', '5px', '#888');

is an incorrect syntax. You need to have one value for the CSS property:

$(this).css('box-shadow', '10px 10px 5px #888');

Upvotes: 6

hohner
hohner

Reputation: 11588

Needs to be:

$(this).hover(function() {
   $(this).css('box-shadow', '10px 10px 5px #888');
}, function() {
   $(this).css('border-color', '');
});

Upvotes: 4

Related Questions