模糊 div 中除一个元素之外的所有元素

Question

我正在尝试模糊 div 中的所有元素，只有一个除外。我看过很多类似的问题 one，我得到了这个：

.table-responsive:not(.confirm) {
    filter: blur(3px);
    pointer-events: none;
}

这基本上应该模糊除确认 class 之外的所有元素。这是一个 js fiddle 演示：https://jsfiddle.net/qbuyuhts/1/

有些卡顿 html 但确实能说明问题。有谁知道为什么 .confirm div 是模糊的？

Answer 1

.table-responsive:not(.confirm) { selects element that have class .table-responsive and have not class .confirm this is wrong ,because .confirm is children of .table-responsive.

所以像这样更改您的代码：

.table-responsive table, .table-responsive div:not(.confirm) {
    filter: blur(3px);
     pointer-events: none;
}

.table-responsive table, .table-responsive div:not(.confirm) {
  filter: blur(3px);
  pointer-events: none;
}

<div style="border: none; overflow-x: visible;" class="table-responsive">

  <div style="background-color:white; width:35%; position:absolute; left:34%;" class="confirm">
    <h3 style="color:black">Are you sure?</h3>
    <button style="background-color:black;color:blue">Cancel</button>
    <button style="background-color:black;color:blue">Confirm</button>
  </div>

  <table id="tbl" style="width:100%">
    <tbody style="display: block; overflow-y: auto">
      <tr>
        <td style="padding-right:1em"><a class="remove"><button>Remove</button></a></td>
        <td style="padding-right:1em"><a><button>Edit</button></a></td>
        <td class="coursetext"><h4 align="left"><b>{{ course }}</b><br><span class="tohide"><b>{{ sections }}</b></span></h4><hr></td>
      </tr>
    </tbody>
  </table>
  
</div>

模糊 div 中除一个元素之外的所有元素

blur all elements except one in a div

html

css

blur