如何使用 jQuery / Javascript 在鼠标悬停时为 div 带来阴影效果
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/11410700/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to bring drop shadow effect for a div on mouseover using jQuery / Javascript
提问by Bobby Francis Joseph
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.
我在一个 html 页面中有很多 div。我需要使用 jQuery/Javascript 在鼠标悬停时给这些 div 一个投影效果。如果最初应用阴影,我可以让它工作,但我无法在运行时让它工作。
The divs which needs to have shadow applied has a common class. In the fiddle it is test.
需要应用阴影的 div 有一个公共类。在小提琴中它是测试。
I have created a fiddle
我创造了一个小提琴
http://jsfiddle.net/bobbyfrancisjoseph/ZEuVE/2/
http://jsfiddle.net/bobbyfrancisjoseph/ZEuVE/2/
It should work on IE8 and above and so I guess CSS3 can be used.
它应该适用于 IE8 及更高版本,所以我想可以使用 CSS3。
回答by PoeHaH
use this css for the shadow effect (covers most browsers):
将此 css 用于阴影效果(涵盖大多数浏览器):
.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:
使用以下 jquery:
$(".yourDiv").hover(function()
{
$(this).toggleClass('classWithShadow');
});
Complete code here: http://jsfiddle.net/ZEuVE/3/
完整代码在这里:http: //jsfiddle.net/ZEuVE/3/
EDIT: sorry , I editted your initial fiddle instead of making a new one. But it works ^^ :)
编辑:对不起,我编辑了你最初的小提琴而不是制作一个新的。但它有效^^ :)
回答by U.P
CSS3 shadow is not supported by IE8
IE8 不支持 CSS3 阴影
For your Above IE8 and other browsers
IE8以上浏览器
$("div").hover(function() {
$(this).css(
"box-shadow", "10px 10px 5px #888"
);
}, function() {
$(this).css(
"box-shadow", "0px 0px 0px #888"
);
});
回答by Talha
$("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
或使用 mouseenter 事件
$("div").mouseenter(function() {
$(this).css("box-shadow", "5px 5px 5px #555");
}).mouseleave(function(){
$(this).css("box-shadow", "0px 0px 0px #555");
});
回答by danwellman
There is little point in using jQuery to add simple hover effects when the CSS :hover
psuedo-class works perfectly on its own.
当 CSS :hover
psuedo-class 可以完美运行时,使用 jQuery 添加简单的悬停效果就没有什么意义了。
The only problem you have is that IE8 does not support native CSS drop-shdows (box-shadow).
您遇到的唯一问题是 IE8 不支持本机 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 guideshows, 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.
1)试图哄骗微软的专有DropShadow
和Blur
过滤器产生类似于阴影的东西。正如本指南所示,这是有可能的,但根据我使用 MS 过滤器的经验,这是您通往充满苦难和痛苦的生活之路的第一步。过滤器会以无法预测的方式影响同一页面上其他看似无关的样式和元素。你真正能做的就是尝试一下,看看。
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.
2)使用图像。这非常糟糕,如果 div 的大小不同,则很难获得正确的图像。但是,如果您在仅 IE8 的样式表中执行此操作并事先知道尺寸,则它可以很好地工作。