模糊身体中除一种元素外的所有元素 [英] Blur all but one element in the body

问题描述

我正在尝试模糊屏幕上除加载动画之外的所有内容.这就是我尝试过的.

I'm trying to blur everything on the screen except the loading animation. This is what I have tried.

$("#addall").click(function() {
  $('#loading').show();
  $('body:not(#loading)').css("filter", "blur(3px)");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="simple-loading" style="display: none" id="loading">
  <div class="active dimmer">
    <div class="text loader">Loading...</div>
  </div>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat id nisi eget egestas. <a id="addall" href="javascript:void(0)">Load.</a> Nullam luctus ac ipsum vel blandit. Cras eu felis ac lorem porta egestas. Sed interdum cursus ligula, sit amet euismod velit volutpat at. Fusce luctus scelerisque mollis. Praesent ligula neque, vehicula elementum justo sed, egestas accumsan eros. Suspendisse at est eget nunc efficitur vestibulum. Suspendisse potenti. Pellentesque quis fermentum ligula.</div>

我也尝试过

$("body").each(function(event) {
    if (event.target.id != "loading") {
        $(this).css("filter","blur(3px)");
    }
});

它永远都行不通...有什么好的解决方法吗?

and it never works... Is there any good solution?

推荐答案

问题是您的选择器适用于所有body元素，然后选择没有ID loading的元素.由于只有一个body元素，而它实际上没有此ID，因此将其选中.当然，这不是您想要的.您要选择body元素的所有子元素，然后过滤不具有loading ID的子元素.

The problem is that your selector works on all body elements and then picks the ones that do not have ID loading. Since there is only one body element and it indeed does not have this ID, it is selected. Of course, this is not what you want. You want to select all children of the body element and then filter those that do not have the loading ID.

选择器必须为body > *:not(#loading).

要澄清:此选择器选择所有元素(*)...
...是身体的孩子(body > *)
...并且没有ID加载(*:not(#loading)).

To clarify: this selector selects all elements (*)...
...that are children of the body (body > *)
...and do not have ID loading (*:not(#loading)).

这使用子选择器(规范)和规范).

body > *:not(#loading) {
  background: #ffd83c;
  filter: blur(3px);
}

div, p {
  margin: 10px;
  padding: 5px;
}

<div>Some DIV.</div>
<div id="loading">Loading DIV</div>
<div>Some other DIV.</div>
<p>A paragraph.</p>

这篇关于模糊身体中除一种元素外的所有元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！