当使用 css transition 实现 hover 宽度变化时，鼠标经过元素间空白区域会导致状态频繁切换、产生闪烁。根本原因是 flex gap 创建的不可交互间隙中断了 hover 连续性，可通过伪元素扩展热区来解决。
当使用 css transition 实现 hover 宽度变化时，鼠标经过元素间空白区域会导致状态频繁切换、产生闪烁。根本原因是 flex gap 创建的不可交互间隙中断了 hover 连续性，可通过伪元素扩展热区来解决。
在基于 Flexbox 的网格布局中，gap 属性虽能优雅地控制元素间距，但它生成的是非可交互的透明间隙。当鼠标从一个 .item 移动到下一个时，会短暂经过这段“无元素区域”，导致 :hover 状态瞬间丢失又恢复，触发 width 过渡反复启停——表现为快速缩放的视觉 glitch。
✅ 核心解决方案：用 ::before 伪元素覆盖间隙，扩展每个项目的响应热区
通过绝对定位的伪元素向左右延伸，覆盖 gap 区域，使鼠标在跨越相邻项时始终处于某个 .item 的 hover 范围内：
.grid {
--gap: 20px;
display: flex;
gap: var(--gap);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.item {
width: 300px;
height: 500px;
background-image: url(https://cdn.pixabay.com/photo/2024/07/03/08/05/hot-air-balloon-8869138_1280.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
position: relative; /* 关键：为伪元素提供定位上下文 */
transition: width 0.7s cubic-bezier(.87, -0.2, .05, 1.54);
}
.item::before {
content: '';
position: absolute;
inset: 0 calc(-1 * var(--gap)); /* 水平方向向左右各延伸 20px */
pointer-events: none; /* 初始不拦截事件，避免干扰其他交互 */
}
.item:hover {
width: 500px;
}
.item:hover::before {
pointer-events: auto; /* hover 时启用，确保热区生效 */
}
⚠️ 关键注意事项：
- 必须为
.item设置position: relative，否则::before的inset定位将相对于，导致错位；inset: 0 calc(-1 * var(--gap))表示：上/下铺满（0），左/右各反向延伸--gap值（即覆盖左侧和右侧的间隙）；pointer-events: none → auto的切换，既保证默认状态下不影响页面其他交互，又在悬停时精准接管间隙区域；- 推荐将
transition-duration略微延长（如0.7s），并优化cubic-bezier()中的负值参数（避免过度震荡），提升动画稳定性。? 进阶提示： 若需支持键盘导航（如 Tab 键聚焦），可额外添加
.item:focus-within样式，并同步扩展焦点热区逻辑，确保无障碍体验一致性。该方案轻量、无需 JS、兼容现代浏览器（Chrome 88+ / Firefox 63+ / Safari 14.1+），是解决 flex gap hover 中断问题的最佳实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
