向尚未单击的元素添加投影

Question

基于以下平铺布局：http://jsfiddle.net/bzCbh/7/

有没有人可以建议一个解决方案，为未点击的元素添加投影，使其看起来好像在瓷砖下面有深度？

由于

**道歉，这里的解决方案在于将包含框阴影的类规则添加到当前图块层＆amp;还有：.layer .tile img {position：relative;} Position Relative阻止了盒子阴影重叠到相邻元素上。 **

Answer 1

这可以通过CSS完成：

.element{
   box-shadow:0 0 10px #999;
}

.element.clicked{
   box-shadow:0 0 0 #999
}

和JS：

$('.element').on('click', function(){
   $(this).addClass('clicked');
}

这是直接的CSS3 ...请确保包含浏览器前缀以实现跨浏览器兼容性。

Answer 2

查看jQuery Shadow Plugin http://syddev.com/jquery.shadow/

Answer 3

根据您需要支持的浏览器，您可以使用CSS3 Box-Shadow属性：

 .tile {
       -moz-box-shadow: 3px 3px 4px #000;
       -webkit-box-shadow: 3px 3px 4px #000;
        box-shadow: 3px 3px 4px #000;
       }