本文介绍了当悬停图像时,其余图像会更改过滤器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有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);
}
这篇关于当悬停图像时,其余图像会更改过滤器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!