Javascript 如何通过css模糊除当前悬停外的所有图像

有没有一种纯css的方法来模糊除悬停图像以外的所有图像？我的当前代码显示在以下链接中。我有一个包裹模糊的区域，但只是不能让图像被悬停在不模糊

谢谢

基本概念：

.wrap:hover
   {
   -webkit-filter: blur(13px);
    -moz-filter: blur(13px);
    -o-filter: blur(13px);
    -ms-filter: blur(13px);
    filter: blur(13px);  

}

img:hover
{
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);  

}  

完整代码可在以下位置找到：

*编辑

---

基本上，我试着模糊所有的图像，除了我悬停在上面的那张，如果我不在图像上，就不要模糊任何东西。下面答案中的代码就是这样做的，除了它模糊了所有的图像，如果我悬停在包装上，其中包括图像之间的空格。我不想模糊，除非我在图像本身上。

将模糊效果放在图像上，然后使用img悬停覆盖模糊

正文{
保证金：0；
填充：0；
背景：#EEE；
字体：10px/13px“Lucida Sans”，无衬线；
}
.包裹{
溢出：隐藏；
利润率：10px；
}
.盒子{
浮动：左；
位置：相对位置；
宽度：20%；
垫底：20%；
}
伯森尔先生{
位置：绝对位置；
左：10px；
右：10px；
顶部：10px；
底部：10px；
溢出：隐藏；
}
.boxInner img{
宽度：100%；
外形：15px固体rgba（0,0,0,5）；
轮廓偏移：-15px；
}
.boxInner.titleBox{
位置：绝对位置；
底部：0；
左：0；
右：0；
边缘底部：-50px；
背景：#000；
背景：rgba（0,0,0,0.5）；
颜色：#FFF；
填充：10px；
文本对齐：居中；
-webkit过渡：所有0.3版本都可以轻松过渡；
-moz转换：所有0.3秒都会变慢；
-o型过渡：所有0.3秒都会变缓；
过渡：所有0.3秒放松；
}
.wrap：悬停img
{
-webkit过滤器：模糊（13px）；
-moz滤波器：模糊（13px）；
-o-滤波器：模糊（13px）；
-ms过滤器：模糊（13px）；
过滤器：模糊（13px）；
}
.wrap:悬停img:悬停
{
-webkit过滤器：模糊（0px）；
-moz滤波器：模糊（0px）；
-o-滤波器：模糊（0px）；
-ms过滤器：模糊（0px）；
过滤器：模糊（0px）；
}
}
body.no-touch.boxInner:hover.titleBox，body.touch.boxInner.touchFocus.titleBox{
页边距底部：0；
}
@仅介质屏幕和（最大宽度：480px）{
/*智能手机视图：1个平铺*/
.盒子{
宽度：100%；
垫底：100%；
}
}
@仅介质屏幕和（最大宽度：650px）和（最小宽度：481px）{
/*平板电脑视图：2个瓷砖*/
.盒子{
宽度：50%；
垫底：50%；
}
}
@仅介质屏幕和（最大宽度：1050px）和（最小宽度：651px）{
/*小型桌面/ipad视图：3块瓷砖*/
.盒子{
宽度：33.3%；
垫底：33.3%；
}
}
@仅介质屏幕和（最大宽度：1290px）和（最小宽度：1051px）{
/*中型桌面：4个瓷砖*/
.盒子{
宽度：25%；
垫底：25%；
}
}

蝴蝶
旧温室
紫色野花
鸟食器
藏红花特写
花园商店
春水仙花
沿路虹膜
花园蓝图
天井
采集花蜜的大黄蜂
蜿蜒花园径

在图像上放置模糊效果，然后使用img悬停覆盖模糊

正文{
保证金：0；
填充：0；
背景：#EEE；
字体：10px/13px“Lucida Sans”，无衬线；
}
.包裹{
溢出：隐藏；
利润率：10px；
}
.盒子{
浮动：左；
位置：相对位置；
宽度：20%；
垫底：20%；
}
伯森尔先生{
位置：绝对位置；
左：10px；
右：10px；
顶部：10px；
底部：10px；
溢出：隐藏；
}
.boxInner img{
宽度：100%；
外形：15px固体rgba（0,0,0,5）；
轮廓偏移：-15px；
}
.boxInner.titleBox{
位置：绝对位置；
底部：0；
左：0；
右：0；
边缘底部：-50px；
背景：#000；
背景：rgba（0,0,0,0.5）；
颜色：#FFF；
填充：10px；
文本对齐：居中；
-webkit过渡：所有0.3版本都可以轻松过渡；
-moz转换：所有0.3秒都会变慢；
-o型过渡：所有0.3秒都会变缓；
过渡：所有0.3秒放松；
}
.wrap：悬停img
{
-webkit过滤器：模糊（13px）；
-moz滤波器：模糊（13px）；
-o-滤波器：模糊（13px）；
-ms过滤器：模糊（13px）；
过滤器：模糊（13px）；
}
.wrap:悬停img:悬停
{
-webkit过滤器：模糊（0px）；
-moz滤波器：模糊（0px）；
-o-滤波器：模糊（0px）；
-ms过滤器：模糊（0px）；
过滤器：模糊（0px）；
}
}
body.no-touch.boxInner:hover.titleBox，body.touch.boxInner.touchFocus.titleBox{
页边距底部：0；
}
@仅介质屏幕和（最大宽度：480px）{
/*智能手机视图：1个平铺*/
.盒子{
宽度：100%；
垫底：100%；
}
}
@仅介质屏幕和（最大宽度：650px）和（最小宽度：481px）{
/*平板电脑视图：2个瓷砖*/
.盒子{
宽度：50%；
垫底：50%；
}
}
@仅介质屏幕和（最大宽度：1050px）和（最小宽度：651px）{
/*小型桌面/ipad视图：3块瓷砖*/
.盒子{
宽度：33.3%；
垫底：33.3%；
}
}
@仅介质屏幕和（最大宽度：1290px）和（最小宽度：1051px）{
/*中型桌面：4个瓷砖*/
.盒子{
宽度：25%；
垫底：25%；
}
}

蝴蝶
旧温室
紫色野花
鸟食器
藏红花特写
花园商店
春水仙花
沿路虹膜
花园蓝图
天井
采集花蜜的大黄蜂
蜿蜒花园径

这是否意味着您希望在默认情况下模糊所有内容？e、 g.i

img {
 -webkit-filter: blur(13px);
 -moz-filter: blur(13px);
 -o-filter: blur(13px);
 -ms-filter: blur(13px);
 filter: blur(13px);
}   

img:hover {
 -webkit-filter: blur(0px);
 -moz-filter: blur(0px);
 -o-filter: blur(0px);
 -ms-filter: blur(0px);
 filter: blur(0px);
}