能否用JavaScript实现随鼠标移动修改HTML Body特定区域模糊样式？

你的需求完全可行，但不能直接给body的局部设置filter样式——因为CSS的filter是作用于整个元素的，无法单独给元素的某一块区域设置不同的filter值。下面是两种实用的实现方案：

方案一：CSS Mask + 跟随鼠标的变量（推荐） #

这种方法利用CSS变量和mask属性，实现起来简单高效，无需复杂DOM操作。

代码实现 #

<body>
  <div class="page-content">
    <h1>测试内容</h1>
    <p>移动鼠标查看清晰区域效果</p>
  </div>
  <!-- 用于显示清晰区域的遮罩层 -->
  <div class="clear-view"></div>
</body>

body {
  margin: 0;
  filter: blur(5px);
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.page-content {
  padding: 2rem;
}

.clear-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 不拦截鼠标事件 */
  background: inherit; /* 继承body的内容和样式 */
  filter: blur(0);
  /* 用径向渐变作为遮罩，只显示鼠标周围圆形区域 */
  mask: radial-gradient(circle 120px at var(--mouse-x) var(--mouse-y), #000 100%, transparent 100%);
  -webkit-mask: radial-gradient(circle 120px at var(--mouse-x) var(--mouse-y), #000 100%, transparent 100%);
}

// 监听鼠标移动，更新CSS变量的位置值
document.addEventListener('mousemove', (e) => {
  document.documentElement.style.setProperty('--mouse-x', `${e.clientX}px`);
  document.documentElement.style.setProperty('--mouse-y', `${e.clientY}px`);
});

原理说明 #

1. 给body设置全局模糊blur(5px)；
2. 新增一个全屏的clear-view元素，它继承body的内容并取消模糊；
3. 通过CSS变量实时获取鼠标位置，再用mask属性让clear-view只显示鼠标周围的圆形区域，视觉上就形成了“鼠标区域清晰、其余模糊”的效果。

方案二：Canvas绘制（进阶场景） #

如果需要更灵活的形状控制（比如方形、不规则区域），可以用Canvas来绘制页面内容，然后在鼠标位置绘制清晰的区域。不过这种方法需要将页面内容绘制到Canvas中，适合对Canvas有基础的开发者。

简单示例思路 #

1. 将页面内容渲染到Canvas；
2. 监听鼠标移动，在Canvas上先绘制模糊后的内容，再在鼠标位置绘制清晰的内容区域。

纠正你代码中的问题 #

你写的document.body[x:y].style.filter = blur("0px")是错误的：

• DOM元素没有[x:y]这种索引方式，无法直接选中元素的某个区域；
• blur()需要用字符串包裹，正确写法是"blur(0px)"，但即便写法正确，也无法实现局部模糊的效果。

内容的提问来源于stack exchange，提问作者Wafiq Jaisyurrahman