Hộp đổ bóng CSS trong jQuery .css()

Question

Firefox 18 dường như không nhận dạng được -moz-box-shadow hoặc thuộc tính CSS box-shadow.

Nếu tôi sử dụng border-color, mọi thứ đều hoạt động tốt.

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

Tôi đang làm gì sai?

Answer 1

Bạn cần phải thực hiện các đối số vào một chuỗi chữ. Tham số giá trị của hàm css(property name, value) là một đối số.

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

Answer 2

Nhu cầu là:

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

Answer 3

này:

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

là một cú pháp không chính xác. Bạn cần có một giá trị cho thuộc tính CSS:

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

Answer 4

Nó nên là:

$(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

Đối với Safari, Google Chrome và Opera sử dụng

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

Đối với Mozilla Firefox sử dụng

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

Đối với các trình duyệt web khác u se

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