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

Question

网站--> 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。这也可以在纯css中使用:hover伪类(即img:hover {opacity:0.7})来完成，或者通过JavaScript更直接地设置不透明度。在jQuery中，这看起来类似于：

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