在这个网站上使用了什么类型的效果？

Question

网站 - ＆gt; http://inspiredm.com正在使用悬停在其后期图片中的效果。它是什么样的效果？它是一个CSS3或jquery效果以及如何做类似的效果？

Answer 1

这是css的不透明度，它不适用于ie8！

您可以像这样创建此效果：

<a><img src="image.jpg" /></a>

a:hover {
background:#fff;
}

a:hover img {
opacity:0.7;
}

编辑：

如果你在滚动页面时指的是后期图像加载延迟，它可能就像是来自jQuery的延迟加载插件：

http://www.appelsiini.net/projects/lazyload

Answer 2

他们似乎将“imgHover”类添加到图片周围的<a>标记中。这是通过JavaScript完成的。然后在他们的样式表中，他们有.imgHover img {opacity:0.7}

因此该网站正在使用JS和CSS的组合。它也可以使用:hover伪类（即img:hover {opacity:0.7}）在纯css中完成，或者通过JavaScript直接设置不透明度。使用jQuery，它看起来像：

$('img').hover(function(){
    $(this).css('opacity', 0.7);
}, function(){
    $(this).css('opacity', 1);
});