本文详解如何通过纯 CSS 实现 Banner 图片悬停模糊、同时高亮显示叠加文字链接的效果，核心在于将 filter: blur() 正确作用于图片而非文字容器，并利用父容器 :hover 状态精准控制样式切换。
本文详解如何通过纯 css 实现 banner 图片悬停模糊、同时高亮显示叠加文字链接的效果，核心在于将 `filter: blur()` 正确作用于图片而非文字容器，并利用父容器 `:hover` 状态精准控制样式切换。
要实现「鼠标悬停 Banner 时图片变模糊、文字链接清晰浮现」的交互效果，关键在于样式作用对象的合理性：原方案错误地对整个 #text-container（含文字）应用了 blur(30px)，导致文字也被模糊，且悬停触发逻辑绑定在文字层上，违背了“悬停区域应覆盖整个 Banner”的设计直觉。
✅ 正确思路是：
- 将模糊滤镜（filter: blur()）仅施加于
元素；
- 利用 #banner-container:hover img 选择器，在父容器被悬停时统一控制图片模糊状态；
- 文字容器 #text-container 保持默认清晰（不设 filter），仅通过透明度、颜色或 z-index 等增强可读性（可选）；
- 确保图文层叠关系正确：
为底层，#text-container 为绝对定位的顶层，且尺寸与图片完全匹配（使用 width: 100%; height: 100% 配合 position: absolute）。
以下是优化后的完整代码示例：
#banner-container {
display: inline-block; /* 避免多余空白，适配内联布局 */
position: relative;
cursor: pointer; /* 明确悬停反馈 */
}
#banner-container img {
width: 375px;
height: auto;
display: block;
filter: blur(0px);
transition: filter 0.2s ease-out; /* 仅过渡 filter，更精准高效 */
}
#text-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none; /* 关键！让鼠标穿透文字层，确保 img 能响应 hover */
}
#text-container a {
pointer-events: auto; /* 但链接本身需可点击 */
color: white;
text-decoration: none;
font-weight: bold;
text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* 提升文字可读性 */
margin: 0 12px;
}
#banner-container:hover img {
filter: blur(30px);
transition: filter 0.2s ease-in;
}<div id="banner-container">
<img src="https://static.tumblr.com/siia3cb/0frs4664t/diacetyl.png" alt="Banner background">
<div id="text-container">
<a href="https://diangeloalvaro.tumblr.com" target="_blank">follow me on tumblr</a>
<a href="https://sk5p4qqqqqqqqq.tumblr.com" target="_blank">background credit</a>
</div>
</div>⚠️ 注意事项：
- pointer-events: none 是实现“悬停触发图片模糊 + 文字始终可见”的关键——它使 #text-container 不拦截鼠标事件，让父容器 #banner-container 能正常捕获 :hover；而子链接单独设 pointer-events: auto 保证可点击。
- 避免对 img 设置 margin-top/margin-bottom（易破坏相对定位基准），推荐用 #banner-container 的外边距或 padding 控制整体间距。
- 若 Banner 需响应式适配，建议将固定宽高（如 375px）替换为 max-width: 100% + height: auto，并用 aspect-ratio 或 padding-top 技巧维持比例。
此方案轻量、语义清晰、无 JS 依赖，兼容现代浏览器（Chrome/Firefox/Safari/Edge ≥ v100），是博客 Banner 交互动效的理想实践。
