javascript - 将鼠标悬停在 li 上时模糊子图像

Question

我有下面的代码，它是一个用图像制作网格的列表。 当悬停在整个“li”上时，我想为图像设置一个 css 模糊类。我想出的解决方案之一是为每个 li 和图像设置一个类 ( http://jsfiddle.net/Y85pZ/ )，但这会是一个很长的列表，我想要更简单的东西，Javascript 就可以了。

我认为也许在 JavaScript 中设置当“li”悬停时，它的子“img”元素被设置为模糊(2px)，但我完全不知道如何在 JS 中做到这一点。有什么帮助吗？

<ul class="cbp-rfgrid">
<li><a href="#"><img src="image.jpg" /><div><h3>See &raquo</h3></div></a></li>
<li><a href="#"><img src="image.jpg" /><div><h3>See &raquo</h3></div></a></li>
<li><a href="#"><img src="image.jpg" /><div><h3>See &raquo</h3></div></a></li>
</ul>

谢谢

Answer 1

怎么样

.cbp-rfgrid li:hover img {
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
filter: blur(2px);
}