Geek Answers Handbook

How to bring shadow effect for div on mouse using jQuery / Javascript

I have many divs in an html page. I need to give these divs a shadow effect for the mouse using jQuery / Javascript. I can make it work if I apply the shadow first, but I cannot make it work at run time.

The div that the shadow application should have has a generic class. In the violin, this is a test.

I created a violin

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

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

+3
source share
4 answers

use this css for 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');
});

: http://jsfiddle.net/ZEuVE/3/

EDIT: , , . ^^:)

+7

CSS3 IE8

IE8

$("div").hover(function() {
        $(this).css(
            "box-shadow", "10px 10px 5px #888"
        );
    }, function() {
        $(this).css(
            "box-shadow", "0px 0px 0px #888"
        );
    });
+5
$("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");
});
+2

jQuery , CSS :hover psuedo- .

, , , IE8 CSS drop-shdows (box-shadow).

, :

1) DropShadow Blur , . , , MS - , . , , , . , , .

2) . , , divs . IE8 , .

+1

More articles:


All Articles