甚至.not
或:not
元素都使所有内容模糊
$("#team").mouseenter(function(){
$('body').not('#team').css("-webkit-filter", "blur(2px)");
});
$("p").mouseleave(function(){
$('body').not('#team').css("-webkit-filter", "blur(0px)");
});
最佳答案
$('body').not('#team')
表示任何没有
<body>
的id="team"
元素。这并不意味着$('body')
中没有id="team"
的任何元素。您需要
$("body,body *").not('#team')
来选择所有不带id="team"
的项目。要么$('*', $('body')).not('#team')
(此内容不包含<body>
-仅内容)。但是,出于两个原因,我强烈建议您不要使用这种选择器:
太贵了
它不适用于您要应用的CSS属性。
在元素上应用
-webkit-filter:blur(Npx)
时,将模糊该元素及其内容。如果任何一个子代也具有-webkit-filter(Npx)
,则将两次应用该过滤器,一次应用于子代,一次应用于父代。这适用于随后的每个孩子。这就是为什么我说它“非常昂贵”。在没有强大的渲染引擎的情况下,您将有效地杀死(或至少停止一点)机器,具体取决于页面中元素的数量以及页面/视口的像素大小。某些浏览器可能针对页面中的此类滥用渲染处理请求实施了一种预防机制,他们可能会跳过将过滤器应用于已经具有类似过滤器的父母的孩子(尽管从我看到的地方,这是错误的-如果我想对某些元素进行双重模糊处理,我希望它们是双重模糊的(而不是单一模糊的元素)。
无论如何,只能通过创建两个并行的DOM结构来“欺骗”您想要达到的总体效果:一个模糊的结构,另一个仅在模糊的“其余”上方显示未模糊的元素。
使用JavaScript以及在
<body>
中的固定位置的显示包装器中克隆,定位和调整想要不模糊的元素的大小,您可能会获得最便宜的结果。可以肯定的是:它不是一线的。
在滚动和调整页面大小时,您可能会很难保持克隆体和原始对象的同步,除非您自己尝试,否则在上提出要求是毫无意义的“范围太广”(在一个问题中要求太多)。
关于jquery - 我想定位一个标签以外的body标签,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44870640/