如何使用jQuery / Javascript为鼠标悬停上的div带来阴影效果 [英] How to bring drop shadow effect for a div on mouseover using jQuery / Javascript

问题描述

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

I have many divs in an html page. I need to give these divs a drop shadow effect on mouseover using jQuery/Javascript. I can get it work if the drop shadow is to be applied initially but I am not able to get it work at the run time.

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

The divs which needs to have shadow applied has a common class. In the fiddle it is test.

我创造了一个小提琴

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

它应该适用于IE8和以上所以我猜CSS3可以使用。

It should work on IE8 and above and so I guess CSS3 can be used.

推荐答案

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

use this css for the shadow effect (covers most browsers):

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

使用以下jquery：

use the following jquery:

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

此处填写完整代码： http://jsfiddle.net/ZEuVE/3/

编辑：对不起，我编辑了你的初级小提琴而不是做一个新的。但它有效^^：）

sorry , I editted your initial fiddle instead of making a new one. But it works ^^ :)

这篇关于如何使用jQuery / Javascript为鼠标悬停上的div带来阴影效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！