Question

我正在寻找某种类型的脚本，它将选择某个div.class中页面上的所有图像，对其应用透明的黑色阴影，然后在悬停时将其淡出。有谁知道这样做的系统？我无法真正修改网站本身（http://cargocollective.com/maureengriswold）或者我已经想出了一些粗制滥造的方式。

Answer 1

通常，您可以通过在图像后面放置黑色背景并将图像的不透明度设置为某个值来实现此目的。 1。

在您的网站上，您将添加以下CSS：

.cardimgcrop {
    background-color: black;
    border-color: white;
}

.cardimgcrop img {
    opacity: 0.7;
}

.cardimgcrop img:hover {
    opacity: 1;
}

更新：

如果你想要一个动画渐变，你会遗漏:hover CSS定义并添加以下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);
});

当然，您也可以使用原生CSS转换来实现此效果（如Howard's answer中所述），但您需要处理浏览器功能。

Answer 2

不完全确定透明黑色阴影是什么意思，但我认为你的意思是像面纱一样的效果，它会悬停并在鼠标移动时返回？

您可以使用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);

你会想要使用确切的CSS来实现你想要的效果，而且你也想在各种浏览器中进行测试，因为CSS过渡支持不是100％。

您可以在MDN文档网站上的CSS Transitions上阅读更多内容。

Answer 3

CSS过滤器是另一种选择http://html5-demos.appspot.com/static/css/filters/index.html

在悬停时将图像从暗到亮变亮

3 个答案: