如何使用jQuery/Javascript为鼠标悬停上的div带来阴影效果

Question

我在html页面中有很多div.我需要使用jQuery/Javascript为鼠标悬停提供这些div的阴影效果.如果要在最初应用投影但我无法在运行时使其工作,我可以使它工作.

需要应用阴影的div具有共同的类.在小提琴中它是测试.

我创造了一个小提琴

http://jsfiddle.net/bobbyfrancisjoseph/ZEuVE/2/

它应该适用于IE8及以上,所以我猜CSS3可以使用.

Answer 1

使用此css进行阴影效果(涵盖大多数浏览器):

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

使用以下jquery:

$(".yourDiv").hover(function()
{ 
   $(this).toggleClass('classWithShadow');
});

完整的代码在这里:http://jsfiddle.net/ZEuVE/3/

编辑:对不起,我编辑了你最初的小提琴,而不是制作一个新的小提琴.但它有效^^ :)

Answer 2

IE8不支持CSS3阴影

对于你的IE8和其他浏览器

$("div").hover(function() {
        $(this).css(
            "box-shadow", "10px 10px 5px #888"
        );
    }, function() {
        $(this).css(
            "box-shadow", "0px 0px 0px #888"
        );
    });