chrome devtools 可强制元素保持 :hover 状态以便调试：右键检查元素后，在 elements 面板中右键选择「force state」→ 勾选 :hover，或点击 styles 面板的 :hov 按钮启用；取消勾选即可解除。
调试网页上那些只在鼠标悬停时才显示的下拉菜单、提示气泡或高亮边框，光靠反复移入移出鼠标既费眼又难精准定位样式问题。Chrome DevTools 的 Elements 面板提供原生支持，无需改代码、不干扰页面逻辑，就能让元素“卡”在 :hover 状态下供你逐行检查 CSS。
用右键菜单快速强制 hover
第一步：在页面上右键点击你想调试的元素（比如导航栏中的某个菜单项），选择「检查」→ 定位到 Elements 面板中对应的 DOM 节点。
第二步：确保该节点在 Elements 树中处于选中状态（高亮蓝色边框），然后再次在该节点上右键。
第三步：从右键菜单中选择「Force state」→ 勾选 :hover。
此时元素立刻进入悬停态，对应 CSS 规则（如 color、background、transform）会在 Styles 面板中实时激活并高亮显示——被覆盖的属性会带删除线，未生效的声明一目了然。如果勾选后没反应，先确认该元素确实定义了 【:hover 伪类规则】；有些框架（如 Vue 的 v-show）会动态移除元素，导致强制状态失效。
通过 Styles 面板手动触发
方法一：在 Elements 面板选中目标元素后，切换到右侧的 Styles 标签页 → 找到顶部工具栏中一个标有 :hov 的小按钮（它通常紧挨着「.cls」按钮）→ 点击它，弹出状态选择面板 → 勾选 :hover。
方法二：直接在 Styles 面板任意一行 CSS 声明上右键 → 选择「Force element state」→ 再勾选 :hover。这个操作会自动将焦点切回对应 DOM 元素，适合你已经正在调样式却突然想看悬停效果的场景。
解除强制状态
回到同一个「Force state」菜单或 :hov 面板，取消勾选 :hover 即可。页面立即恢复原始交互行为，所有强制状态均为临时调试态，刷新页面后自动清空。
