javascript - jQuery .css() 中的 CSS 框阴影

Question

Firefox 18 似乎无法识别-moz-box-shadow或box-shadowCSS 属性。

如果我使用border-color，一切正常。

$($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', '');
    }
);

我究竟做错了什么？

Answer 1

您需要将参数转换为一个字符串文字。函数的值参数css(property name, value)是一个参数。

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

Answer 2

这个：

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

是不正确的语法。您需要为 CSS 属性设置一个值：

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

Answer 3

需要是：

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

Answer 4

它应该是：

$(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');

Answer 5

对于 Safari、Google Chrome 和 Opera 使用

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

对于 Mozilla Firefox 使用

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

对于其他网络浏览器，请使用

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