我试图模糊 div 中除一个元素之外的所有元素。 我已经看过很多类似的问题 one我明白了:
.table-responsive:not(.confirm) {
filter: blur(3px);
pointer-events: none;
}
这基本上应该模糊除 confirm 类之外的所有元素。这是一个演示它的 js fiddle :https://jsfiddle.net/qbuyuhts/1/
这是一些简陋的 html,但可以显示问题。有谁知道为什么 .confirm div 是模糊的?
最佳答案
.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>
关于html - 模糊除 div 中的一个元素之外的所有元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45249817/