按钮悬停后出现虚线框实为:focus轮廓而非:hover行为，是浏览器默认可访问性设计；应通过border替代outline并预留透明边框空间，同时为:focus单独定义清晰视觉反馈以兼顾可用性与无障碍。

为什么按钮悬停后出现虚线框？

这是浏览器默认的 :focus 轮廓（outline），不是 :hover 的行为。很多人误以为是悬停触发的，实际是点击或 Tab 键聚焦后才出现——但若你用 CSS 同时写了 :hover 和 :focus，又没重置 outline，就容易混淆。

虚线框本质是可访问性设计，不能直接删，但可以安全地替换成实线边框或其它视觉反馈。

如何让悬停时显示实线边框？

• 用 border 替代 outline：outline 不占布局空间，border 会撑开元素，需提前预留空间（比如设 border: 2px solid transparent）
• 推荐写法：

  button {
    border: 2px solid transparent;
    transition: border-color 0.2s;
  }
  button:hover {
    border-color: #007bff;
  }

• 避免只改 outline：如 outline: 2px solid #007bff 仍可能和 focus 状态冲突，且 outline 无法圆角、无法控制内外侧

兼容性与可访问性注意点

实线边框要确保对比度达标（尤其浅色背景上的浅色边框），否则对低视力用户不友好。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 别用 outline: none 彻底移除 focus 轮廓——这会让键盘用户失去焦点指示
• 正确做法：为 :focus 单独定义清晰的实线或阴影，例如

  button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
  }

• Chrome/Firefox 对 outline-offset 支持良好，可用于微调虚线/实线位置，但 Safari 旧版本可能忽略

移动端点击后残留虚线怎么处理？

iOS Safari 和部分安卓浏览器在触摸点击后会短暂显示 :active 或 :focus 的 outline，这不是 hover，但视觉类似。

立即学习“前端免费学习笔记（深入）”；

• 加 -webkit-tap-highlight-color: transparent 消除点击高亮（不影响 focus）
• 同时补上 button:active { outline: none; } 防止过渡残留
• 注意：如果用了 border 方案，:active 状态下建议保持边框不变或轻微变深，避免跳动感

实际效果是否“像虚线变实线”，取决于你是否把原始 outline 和新 border 做了视觉对齐——多数时候，直接控制 border 就够了，outline 只该用于无障碍聚焦反馈。