当悬停图像时，其余图像会更改过滤器

我有 10 张图像，当我将鼠标悬停在其中一张时，我希望剩下的 9 张图像可以更改过滤器。

这就是我所拥有的：

CSS

#posts-wrapper:hover .posts {
    -webkit-filter: blur(10px);
}

jQuery

$(document).ready(function(){ 

    $(".posts").mouseover(function() { 
        $(this).css("-webkit-filter", "none"); 
    }); 

    $(".posts").mouseleave(function() {
        $(this).css("-webkit-filter", "blur(10px)"); 
    }); 

}); 

使用纯CSS，你可以做这样的事情：

jsFiddle 示例... 和jsFiddle 示例不支持模糊的地方。

#parent > div {
    width:100px;
    height:100px;
    border:1px solid black;
    float:left;
    margin:5px;
}
#parent:hover > div:not(:hover) {
    -webkit-filter: blur(10px);
}

可悲的是，:not选择器不完全支持..你也可以使用这样的东西来代替：

jsFiddle 示例.. 然后再次，另一个 jsFiddle 示例不支持模糊的地方。

#parent > div {
    width:100px;
    height:100px;
    border:1px solid black;
    float:left;
    margin:5px;
}
#parent:hover > div {
    -webkit-filter: blur(10px);
}
#parent:hover > div:hover {
    -webkit-filter:blur(0);
}