07 Chrome浏览器捕获hover元素样式

我不是女神ヾ 2022-10-06 05:59 495阅读 0赞

### 问题描述： ###

我们在开发web页面时肯定会遇到很多hover元素面板，这些面板有一个特点就是：当我们鼠标移动到某个icon或文字时，相应的面板才会显示，鼠标一离开icon或文字，面板会立即隐藏。所以当我们想用Chrome浏览器的开发者工具去捕获这些面板来调试其样式时会变得很困难。

如下图中的灰色子菜单面板就是一个hover元素面板，它只有在我们鼠标移动到相应的主菜单选项时才会展示，鼠标离开主菜单选项后就会隐藏，所以我们在开发者工具中通过左下角的捕获图标无法捕获到它。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70][]

这篇文章就给大家介绍一个小技巧，应该怎么去捕获这些hover元素。

### 解决方法： ###

1、打开开发者工具，将调试面板中的标签页切换至【Sources】面板，如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 1][]

2、将鼠标移动至控制hover元素显示的icon或者文字上，将其hover元素显示，如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 2][]

3、此时鼠标不要移动，一直放置在当前的icon或者文字上，我们按下键盘上关于调试代码中打断点的快捷键，暂停代码的执行，如下：

注：此处的断点快捷键如果是Mac用户的按【command+delete正下方的竖直线键】，如果是windows用户的话应该是【ctrl+delete正下方的竖直线键】，具体的可以百度查阅。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 3][]

4、然后我们将开发者工具的标签页切换至【Elements】面板，然后使用捕获工具去捕获这个hover元素，此时就可以捕获了，也可以随意修改样式了，如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 4][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70]: /images/20221005/bf4205c0d3404246aecfc87674b00216.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 1]: /images/20221005/f63164cef2f046838e6f54bd89e9cd66.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 2]: /images/20221005/2202850847ed4e93b8f4192d9c74b180.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 3]: /images/20221005/884b7d4eb68e41318648ebf6b25c28f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 4]: /images/20221005/6d77bbbbb38c4e3cb39f05ba0e6951af.png