Element 面板 - 元素状态模拟

功能说明

强制触发元素的伪类状态（如 :hover、:active、:focus 等），无需实际操作，方便调试交互样式。

开启方法

选中元素 → Styles 面板 → 点击 :hov 按钮 → 勾选要模拟的状态

---

常用伪类状态

伪类	说明	应用场景
:hover	鼠标悬停	调试按钮/链接悬停效果、下拉菜单
:active	鼠标按下	调试按钮点击反馈
:focus	获得焦点	调试表单输入框聚焦样式
:visited	链接已访问	调试链接访问后的颜色变化
:focus-visible	键盘聚焦	调试键盘导航样式

---

实际案例

场景：调试链接的 hover 和 active 效果

a {
  color: blue;
  text-decoration: none;
}
a:hover {
  color: red;
  text-decoration: underline;
}
a:active {
  color: green;
}

操作步骤：

1. 选中 <a> 元素
2. 点击 Styles 面板的 :hov 按钮
3. 勾选 :hover 或 :active 复选框
4. 元素保持该状态，可实时编辑样式
5. 可同时勾选多个状态查看组合效果