Question

即使是.not或:not元素

，它也会变得模糊不清

$("#team").mouseenter(function(){
    $('body').not('#team').css("-webkit-filter", "blur(2px)");
});

$("p").mouseleave(function(){
    $('body').not('#team').css("-webkit-filter", "blur(0px)");
});

Answer 1

你正在做body, not body#team.

未经测试但是这样的事情应该这样做：

$('body').find('*').not('#team').css(/* whatever */)

Answer 2

$('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结构来“欺骗”：一个变得模糊，一个只显示模糊“休息”上方的非模糊元素。

您可能会在<body>中使用JavaScript和克隆，定位和调整要在固定位置的显示包装中看到非模糊的元素来获得最便宜的结果。有一件事是肯定的：它不是单行的。

你可能会有 非常困难 在滚动和调整页面的同时保持克隆和原始版本同步，除非你想出一个自己的尝试，因此要求它是 off-topic 因为“太宽泛”（太多要求了单个问题）。

我想定位除一个元素之外的body标签

2 个答案: