javascript 悬停时将图像从暗到亮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9057471/
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
Brighten images from dark to light on hover
提问by Salem
I'm looking for a script of some sort that will select all images on a page within a certain div.class, apply a transparent black shadowing to it, and then fade it out on hover. Does anyone know of a system of doing this? I can't really modify the site itself (http://cargocollective.com/maureengriswold) or I'd have figured out some shoddy way of doing it already.
我正在寻找某种脚本，它将选择某个 div.class 中页面上的所有图像，对其应用透明的黑色阴影，然后在悬停时将其淡出。有谁知道这样做的系统？我无法真正修改网站本身 (http://cargocollective.com/maureengriswold) 或者我已经找到了一些粗制滥造的方法。
回答by Julian D.
Typically you would do this by putting a black background behind your images and the set the opacity of the images to some value < 1.
通常，您可以通过在图像后面放置黑色背景并将图像的不透明度设置为某个值 < 1 来实现此目的。
On your site, you would add the following CSS:
在您的网站上，您将添加以下 CSS：
.cardimgcrop {
background-color: black;
border-color: white;
}
.cardimgcrop img {
opacity: 0.7;
}
.cardimgcrop img:hover {
opacity: 1;
}
UPDATE:
更新：
If you want an animated fading, you would leave out the :hoverCSS definition and add the following Javascript lines (using jQuery 1.4.2 as already used on your site):
如果您想要动画淡入淡出，您可以省略:hoverCSS 定义并添加以下 Javascript 行（使用您网站上已经使用的 jQuery 1.4.2）：
$(document).delegate('.cardimgcrop img', 'mouseover', function() {
$(this).fadeTo(500, 1);
});
$(document).delegate('.cardimgcrop img', 'mouseout', function() {
$(this).fadeTo(500, 0.7);
});
Of course you could also native CSS transitions instead for this effect (as suggested in Howard's answer), but you would need to take care of browser capabilities.
当然，您也可以使用本机 CSS 转换来代替此效果（如Howard 的回答中所建议），但您需要注意浏览器功能。
回答by Howard
Not entirely sure what you mean by transparent black shadowing, but I think you mean an effect like a veil over it, which lifts on hover and returns on mouseout?
不完全确定你所说的透明黑色阴影是什么意思，但我认为你的意思是像面纱一样的效果，它在悬停时升起并在鼠标移开时返回？
You can probably achieve this effect entirely using css. Something like this:
您可以完全使用 css 来实现这种效果。像这样的东西：
DIV.myClass{
-moz-transition-property: background-color;
-moz-transition-duration: 2s;
background-color: rgba(0,0,0,0.6);
}
DIV.myClass:hover{
-moz-transition-property: background-color;
-moz-transition-duration: 2s;
background-color: rgba(255,255,255,1);
You'll want to play around with the exact CSS to achieve the effect you want, and also you'll want to test in various browsers as CSS transition support is not 100%.
您需要使用确切的 CSS 来实现您想要的效果，并且您还需要在各种浏览器中进行测试，因为 CSS 转换支持不是 100%。
You can read more on CSS Transitionsat the MDN documentation site.
您可以在 MDN 文档站点阅读有关CSS 转换的更多信息。
回答by dman
CSS filters are another option http://html5-demos.appspot.com/static/css/filters/index.html
CSS 过滤器是另一种选择http://html5-demos.appspot.com/static/css/filters/index.html
