当悬停图像时，其余图像会更改过滤器 [英] When hover a image, the rest of images changes the filter

问题描述

我有10张图片，当我将鼠标悬停在其中时，我想要剩下的9张图片更改过滤器。

I have 10 images, and when I hover one, I want the 9 remaining to change the filter.

这是我有的：

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示例 （其中模糊不是支持。

jsFiddle example ... and jsFiddle example where blur isn't supported.

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

很遗憾，：not selector 不完全支持 。您还可以使用类似于而是：

Sadly, the :not selector isn't fully supported.. you could also use something like this instead:

jsFiddle示例 ..再次 另一个jsFiddle示例 其中不支持模糊。

jsFiddle example .. and again, another jsFiddle example where blur isn't supported.

#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);
}

这篇关于当悬停图像时，其余图像会更改过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！