HTML怎么做鼠标悬停模糊_html鼠标hover模糊blur效果【精选】-html教程-PHP中文网

hover 时用 filter: blur() 需作用于目标元素本身而非父容器，backdrop-filter 才适用于模糊背后内容；两者均需注意兼容性、性能及降级方案。

html怎么做鼠标悬停模糊_html鼠标hover模糊blur效果【精选】

hover 时用 `filter: blur()` 最直接

浏览器原生支持，不需要 JS，写两行 CSS 就能生效。关键点是：必须给元素本身加 filter，不能只加在伪类上还指望父容器“透出”模糊——blur() 作用的是该元素的渲染层，不是背景。

常见错误是这么写：

.box {
  background: url(./bg.jpg);
}
.box:hover {
  filter: blur(4px); /* ❌ 错！图片没被模糊，只是 box 容器变糊了，但图还在底下清晰显示 */
}

正确做法是让要模糊的内容（比如图片、文字块）作为独立子元素，或直接对带背景的元素用 backdrop-filter（见下一条）：

.box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(./bg.jpg);
  filter: blur(4px);
  z-index: -1;
}
.box:hover::before {
  filter: blur(8px);
}

`backdrop-filter` 模糊「背后」内容（适合毛玻璃效果）

如果你想要的是「悬停时让元素下方的背景变模糊」（比如导航栏浮在内容上、hover 时出现毛玻璃感），backdrop-filter 才是正解。它只影响元素背后的堆叠上下文，不模糊自身内容。

注意三点：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

必须配合 background-color（哪怕 rgba(255,255,255,0.1)）才能看见效果，纯透明时无效
需要开启硬件加速（加 transform: translateZ(0) 或 will-change: backdrop-filter）来避免 Safari 卡顿或失效
Firefox 默认禁用，需手动开启 about:config → layout.css.backdrop-filter.enabled = true（生产环境慎用）

.glass-btn {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px); /* Safari 兼容 */
  transition: backdrop-filter 0.3s;
}
.glass-btn:hover {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

IE 和旧版 Edge 不支持 `filter` 和 `backdrop-filter`

IE 完全不支持这两个属性；Edge 17+ 支持 filter，但 backdrop-filter 直到 Edge 79（Chromium 内核）才支持。如果项目还需兼容 IE，别硬上，改用渐变遮罩 + 低分辨率背景图模拟模糊感更实际。

检测是否支持可这样写降级：

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass-btn {
    /* 启用毛玻璃 */
  }
}
@supports not (backdrop-filter: blur(1px)) {
  .glass-btn {
    background: rgba(255, 255, 255, 0.3); /* 降级为半透明白底 */
  }
}