How To Bring Drop Shadow Effect For A Div On Mouseover Using Jquery / Javascript

June 25, 2024 Post a Comment

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 initial

Solution 1:

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

.classWithShadow{
   -moz-box-shadow: 3px3px4px#000; 
   -webkit-box-shadow: 3px3px4px#000; 
   box-shadow: 3px3px4px#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 ^^ :)

Solution 2:

CSS3 shadow is not supported by IE8

For your Above IE8 and other browsers

$("div").hover(function() {
        $(this).css(
            "box-shadow", "10px 10px 5px #888"
        );
    }, function() {
        $(this).css(
            "box-shadow", "0px 0px 0px #888"
        );
    });

Solution 3:

$("div").mouseover(function() {
     $(this).css("box-shadow", "5px 5px 5px #555");
  }).mouseleave(function(){
    $(this).css("box-shadow", "0px 0px 0px #555");
 });

OR use mouseenter event

$("div").mouseenter(function() {
   $(this).css("box-shadow", "5px 5px 5px #555");
  }).mouseleave(function(){
    $(this).css("box-shadow", "0px 0px 0px #555");
});

Solution 4:

There is little point in using jQuery to add simple hover effects when the CSS :hover psuedo-class works perfectly on its own.

The only problem you have is that IE8 does not support native CSS drop-shdows (box-shadow).

To overcome this you have two choices;

1) Attempt to coax microsoft's proprietary DropShadow and Blur filters into producing something resembling a drop-shadow. It's possible, as this guide shows, but in my experience using MS's filters is your first step on the path to a life filled with misery and pain. Filters affect other, seemingly unrelated styles and elements on the same page in ways that it is impossible to foretell. All you can really do is try it and see.

2) use an image. This is pretty bad, and is tricky to get the image right if the divs are all different sizes. But if you do it in an IE8 only style sheet and know the dimensions beforehand, it can work well.

Solution 5:

This Is Universal Answer that works regardless of Codebehind Language goes in the source aspx. use & CSS

<style>.img {
      
     
      border:2px solid #fff;
       box-shadow: 1px1px .5px#ccc;
      -moz-box-shadow: 1px1px .5px#ccc;
      -webkit-box-shadow: 1px1px .5px#ccc;
      float:left;
      width:auto;
      border:solid;
      border-width:.25px;
      padding:15px;
      margin-right:20px;
      margin-bottom:20px;
      margin-top:20px;
      border-radius:5px;
     text-align:center;
    
    
  
    }
    .img:hover {
  box-shadow: 10px10px5px#ccc;
      -moz-box-shadow: 10px10px5px#ccc;
      -webkit-box-shadow: 10px10px5px#ccc;
       -webkit-transform: scale(1.25, 1.25);
    transform: scale(1.25, 1.25);
    background: linear-gradient(to bottom, #FFFFFF, #FFFFFF);
}
    
  </style><MyShadowdivOnMousOverclass="img"><MyShadowdivOnMousOver >

javascript dozent