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

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

需要应用阴影的div有一个公共类。在小提琴中，这是一种考验

我创造了一把小提琴

---

它应该在IE8及以上版本上工作，所以我想可以使用CSS3

将此css用于阴影效果（涵盖大多数浏览器）：

使用以下jquery：

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

请在此完成代码：

---

编辑：对不起，我编辑了你最初的小提琴而不是新的。但是它可以工作。^：）

IE8不支持CSS3阴影

适用于以上IE8和其他浏览器

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

或者使用mouseenter事件

$("div").mouseenter(function() {
   $(this).css("box-shadow", "5px 5px 5px #555");
  }).mouseleave(function(){
    $(this).css("box-shadow", "0px 0px 0px #555");
});

---

当CSS

：hover

psuedo类独立工作时，使用jQuery添加简单的悬停效果没有什么意义

唯一的问题是IE8不支持本机CSS drop shdows（框阴影）

要克服这一点，你有两个选择

1） 试图诱使微软专有的

DropShadow

和

Blur

过滤器产生类似DropShadow的东西。如图所示，这是可能的，但根据我的经验，使用MS的过滤器是你走向充满痛苦和痛苦的生活的第一步。过滤器影响同一页面上其他看似不相关的样式和元素，其影响方式无法预测。你真正能做的就是试试看

---

2） 使用图像。这是非常糟糕的，如果div都是不同大小的，那么很难获得正确的图像。但是，如果你在一个只支持IE8的样式表中使用它，并且事先知道尺寸，它就可以很好地工作。

只需使用CSS

div:hover{box shadow:…}

。这在IE8上是如何工作的呢？我只是说CSS是实现这一点的工具，而不是JavaScript。OP对box shadow的一些挖掘将导致厂商前缀和IE的DropShadow过滤器。

$("div").mouseover(function() {
     $(this).css("box-shadow", "5px 5px 5px #555");
  }).mouseleave(function(){
    $(this).css("box-shadow", "0px 0px 0px #555");
 });

$("div").mouseenter(function() {
   $(this).css("box-shadow", "5px 5px 5px #555");
  }).mouseleave(function(){
    $(this).css("box-shadow", "0px 0px 0px #555");
});