循环遍历div中的所有图像并显示具有模糊效果的图像

Question

我在div中有多个图像，例如

<div class="am-container" id="am-container">
            <a href="#"><img src="images/1.jpg"></img></a>
            <a href="#"><img src="images/2.jpg"></img></a>
            <a href="#"><img src="images/3.jpg"></img></a>
            <a href="#"><img src="images/4.jpg"></img></a>
</div>

现在我想遍历所有图像并显示为模糊，并在鼠标悬停时将其显示为原始形式。

我可以用简单的jquery做到吗，我已经使用gaussian.js blur.js进行了一些教程和演示，但无法正确完成。

请提出建议。

Answer 1

您可以使用纯CSS进行此操作（仅在Webkit浏览器中有效）

.am-container a img {
    filter: url(#blurred);
    -webkit-filter: blur(5px);
}

.am-container a:hover img {
    filter: url(#unblurred);
    -webkit-filter: blur(0px);
}

将此SVG添加到HTML代码中，或从外部文件引用它（以添加Firefox支持）：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="blurred" x="0" y="0">
        <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
    <filter id="unblurred" x="0" y="0">
        <feGaussianBlur in="SourceGraphic" stdDeviation="0" />
    </filter>
  </defs>
</svg>

的jsfiddle

Answer 2

.am-container a img:hover {
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
filter: blur(2px);
}

用这个...