jquery - 本站使用了什么类型的效果？

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 的组合。也可以使用:hover伪类（即img:hover {opacity:0.7}）在纯 css 中完成，或者更直接地使用 JavaScript 设置不透明度。使用 jQuery，这看起来像：

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