chrome 开发者工具如何查看元素:hover时的样式

在 Chrome 开发者工具中查看元素的 :hover 样式，可以通过以下步骤实现：

打开开发者工具：右键点击页面中的元素，然后选择“检查（Inspect）”或按下 F12 或 Ctrl + Shift + I (Windows) / Cmd + Option + I (Mac) 打开开发者工具。

选择元素：在“Elements”面板中选择你要查看 :hover 样式的元素。

启用 :hover 伪类：

在 Elements 面板的右侧样式窗口中，找到带有“:hov”的按钮（通常在样式面板的顶部），点击它。

在下拉选项中勾选 :hover，这样会强制元素进入 :hover 状态。

查看并编辑样式：勾选后，样式面板会显示该元素在 :hover 状态下的样式，你可以查看或直接编辑这些样式。

其他主流浏览器例如Edge，Firefox都有类似功能。