javascript - 悬停时将图像从黑暗变亮

我正在寻找某种脚本，该脚本将选择某个div.class中页面上的所有图像，对其施加透明的黑色阴影，然后在悬停时淡出。有人知道这样做的系统吗？我无法真正修改网站本身(http://cargocollective.com/maureengriswold)，或者我已经想出了一些卑鄙的方式来做。

最佳答案

通常，您可以通过在图像后面放置黑色背景并将图像的不透明度设置为某些值
在您的网站上，您将添加以下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中所建议)，但是您需要注意浏览器的功能。

关于javascript - 悬停时将图像从黑暗变亮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9057471/