Question

143

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

rated 0 times [ 144] [ 1] / answers: 1 / hits: 18794 / 12 Years ago, tue, july 10, 2012, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

hallie

Add To Favorites

Follow

Total Points: 503

Total Questions: 114

Total Answers: 103

Location: Iraq

Member since Fri, Jun 5, 2020

4 Years ago

hallie questions

1 Uncaught TypeError: Cannot read properties of undefined (reading 'navigate')

Fri, Jan 28, 22, 00:00, 2 Years ago

1 isSameOrBefore implementation for date-fns

Fri, Jul 9, 21, 00:00, 3 Years ago

1 Module build failed when using mini-css-extract-plugin with postcss-loader for less

Thu, May 27, 21, 00:00, 3 Years ago

1 d3.js in Angular - Property 'event' does not exist on type 'typeof import

Wed, Nov 11, 20, 00:00, 4 Years ago

1 Uncaught SyntaxError: Unexpected token '< ' VueJS PWA

Fri, Mar 27, 20, 00:00, 4 Years ago

View All

answered 12 Years ago oliverkarle · Accepted Answer

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