如何帶來陰影效果的使用jQuery/JavaScript的

我有一個HTML頁面的div很多鼠標懸停一個div。我需要使用jQuery/Javascript爲這些div提供鼠標懸停的陰影效果。如果最初應用投影，但我無法在運行時得到它，我可以使它工作。如何帶來陰影效果的使用jQuery/JavaScript的

這需要具有陰影的div施加具有共同類。在小提琴中它是測試。

我創建了一個小提琴

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

應該在IE8及以上的工作，所以我想CSS3可以使用。

來源

2012-07-10 Bobby Francis Joseph

只需使用CSS'格：懸停{箱陰影：...}'。 – Graham 2012-07-10 09:52:18

這是如何工作在IE8上？ – danwellman 2012-07-10 09:56:16

我只是說CSS是這個工具，而不是JavaScript。有些挖掘到OP的盒子陰影會導致供應商前綴和IE的DropShadow過濾器。 – Graham 2012-07-10 10:27:45

使用這個CSS的陰影效果（涵蓋了大部分瀏覽器）：

.classWithShadow{ 
    -moz-box-shadow: 3px 3px 4px #000; 
    -webkit-box-shadow: 3px 3px 4px #000; 
    box-shadow: 3px 3px 4px #000; 
}

使用下面的jQuery：

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

完整的代碼在這裏：http://jsfiddle.net/ZEuVE/3/

編輯：對不起，我編輯你的初始小提琴而不是做一個新的。但是，它的工作原理^^ :)

來源

2012-07-10 09:54:34 PoeHaH

CSS3陰影不受IE8

爲了您上面IE8等瀏覽器

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

來源

2012-07-10 09:57:19

就是我正在尋找的 - 謝謝！ – Jona 2014-03-12 05:11:17

$("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"); 
});

來源

2012-07-10 10:03:46 Talha

使用jQuery添加簡單的懸停效果幾乎沒有意義，當CSS :hover psuedo-上課完全靠自己完成。

你唯一的問題是，IE8不支持本機CSS下拉shdows（箱陰影）。

爲了克服這一點，你有兩個選擇;

1）嘗試將微軟專有的DropShadow和Blur過濾器轉換成類似下拉陰影的東西。有可能，正如所示，但根據我的經驗，使用MS濾波器是您走向充滿痛苦和痛苦的人生道路上的第一步。過濾器會以無法預知的方式影響同一頁面上的其他看似無關的樣式和元素。你真正能做的就是試試看。

2）使用的圖像。這是非常糟糕的，並且如果div的大小不同，則很難得到正確的圖像。但是，如果你只在IE8樣式表中做，並且事先知道尺寸，它可以很好地工作。

來源

2012-07-10 10:08:00 danwellman

如何帶來陰影效果的使用jQuery/JavaScript的

回答

相關問題