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"
        );
    });

Answer 3

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

或使用mouseenter事件

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

Answer 4

当CSS :hover psuedo-class完全独立运行时，使用jQuery添加简单的悬停效果毫无意义。

唯一的问题是IE8不支持原生CSS drop-shdows（box-shadow）。

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

1）尝试哄骗微软的专有DropShadow和Blur过滤器，以产生类似于阴影的东西。正如this guide所示，这是可能的，但根据我使用MS过滤器的经验，这是迈向充满痛苦和痛苦的生活道路的第一步。过滤器会以无法预知的方式影响同一页面上其他看似无关的样式和元素。你所能做的就是试试看。

2）使用图像。这非常糟糕，如果div的大小各不相同，那么要使图像正确是很棘手的。但是如果你只在IE8中使用样式表并预先知道尺寸，那么它可以很好地工作。

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

4 个答案: