How to bring drop shadow effect for a div on mouseover using jQuery / Javascript

Question

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.

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

I have created a fiddle

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

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

Answer 1

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

use the following jquery:

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

Complete code here: http://jsfiddle.net/ZEuVE/3/

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