在复选框元素上过滤模糊？答案

【问题标题】：filter blur on checkbox element?在复选框元素上过滤模糊？
【发布时间】：2021-02-07 02:09:00
【问题描述】：

我试图在选中复选框时过滤除侧边栏以外的每个元素上的模糊。出于某种原因，我检查过的其他选项卡对我不起作用。当导航栏被选中时，我希望除导航栏之外的所有内容都被模糊，而在未选中时不被模糊。为什么这不起作用？

<div id="sidebar" class="sidebar">
      <input id="sidebar-input" type="checkbox" class="sidebar__input" />
      <label for="sidebar-input" class="sidebar__label"></label>
      <div class="sidebar__container">
        <a href="#" class="sidebar__link">Projects</a>
        <a href="#" class="sidebar__link">Skills</a>

        <a href="#" class="sidebar__link">About</a>
        <a href="#" class="sidebar__link">Resume</a>
        <a href="#" class="sidebar__link">Github</a>
        <a href="#" class="sidebar__link">Contact</a>
      </div>
    </div>

.sidebar {
  background-color: rgba(85, 85, 85, 0.397);
  height: 100vh;
  width: 0;
  position: fixed;
  top: 0;
  right: 0;
  padding: 5rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 1s;
  z-index: 100;

 &__input:checked:not(.sidebar) {
    filter: blur(10px);
  }

}

【问题讨论】：

如果你喜欢 jQuery，这个 fiddle 应该可以帮助到 jsfiddle.net/carl_marie/fjq721zb
如果没有其他人有答案，我想我会选择这个 jquery 答案，但我确实觉得这个答案有点矫枉过正。谢谢
stackoverflow.com/questions/9717135/…
您的代码只显示侧边栏？您是否能够创建一个有效的代码段来展示您到目前为止所拥有的内容？我没有看到 JSFiddle 示例有任何模糊。

标签： html css sass

【解决方案1】：

有一个网站，其中有#sidebar 和其中的#sidebar-input，并且您希望在选中#sidebar-input 时模糊所有期望#sidebar 的内容-css 无法为之前的元素添加任何样式复选框或任何父级，您只能在 DOM 中更深地前进。

使用提供的代码，您可以使用以下内容模糊 #sidebar expect 复选框内的所有内容：

#sidebar-input{
    &:checked{
        &+label {
            filter: blur(10px);

            &+.sidebar__container{
                filter: blur(10px);
            }
        }
    }
}

如果元素在开始时模糊，则删除模糊。要模糊除#sidebar 之外的所有内容，您需要使用 JS 或 jQuery，例如

$('#sidebar-input').change(function() {
    if ($(this).prop("checked")) {
        $("body").addClass("blur")
        /*blur everything expect #sidebar in css*/
    }
    else{
        $("body").removeClass("blur")
    }
});

【讨论】：