我有 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 example ... 和 jsFiddle example不支持模糊的地方。
#parent > div {
width:100px;
height:100px;
border:1px solid black;
float:left;
margin:5px;
}
#parent:hover > div:not(:hover) {
-webkit-filter: blur(10px);
}
遗憾的是,:not
选择器 isn't fully supported .. 你也可以改用这样的东西:
jsFiddle example .. 再一次,another jsFiddle example不支持模糊的地方。
#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);
}
关于jquery - 悬停图像时,其余图像会更改过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19885585/