如何在下拉菜单上模糊网站答案

【问题标题】：how to blur the website when on a dropdown menu如何在下拉菜单上模糊网站
【发布时间】：2021-03-31 16:40:26
【问题描述】：

我正在努力使用我拥有的代码来完成这项工作。以下是我目前拥有的代码。因此，我们将不胜感激。

$(function() {
  $('.uk-navbar-dropdown').on('mouseover', function() {
    $('.body').show();
  });
  $('.uk-navbar-dropdown').on('mouseout', function() {
    $('.body').hide();
  });
});

css代码：

.body{
  position: absolute;
  display:none;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #000000;
  opacity: .5;
  z-index: 100;
}

【问题讨论】：

body 是类还是标签？
类。我想如果它是“body”类，那么它会在下拉菜单下使用所有内容。我也尝试过其他课程，但如果我做错了，你能指教。谢谢。

标签： javascript jquery wordpress html css

【解决方案1】：

.body 的索引值必须高于内容 div，并且必须与内容 div 处于同一级别。

<body>
<div class="body"></div>
<div class="content"></div>
</body>

另外，.body 的宽度和高度必须为 100%。

在您的 CSS 中没有模糊但不透明，这是不一样的。在你的情况下，它会变灰。

尝试背景模糊：

.body {
  backdrop-filter: blur(2px);
}

【讨论】：