其余图像会更改过滤器

其余图像会更改过滤器

本文介绍了当悬停图像时,其余图像会更改过滤器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有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 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 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);
}

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

08-24 09:30