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

javascript, jquery, mouseevent

Solution

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 ^^ :)

Problem

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.

Original source