问题
在调试页面，或者查看别人项目的页面时，如果想查看鼠标hover后的样式变化 或者 展示的下拉框，想到控制台中查看，样式或者下拉框就会消失。（因为鼠标移开了）
解决
首先得知道样式的变换是由 css 控制，还是 js 鼠标移入移出事件控制的。不同的实现方式对应着不同的解决办法，无法通用。一般情况下，hover后只是改变自身的样式 例如边框高亮，大概率是用css实现的；hover后展示下拉框，则应该是用 js 事件来修改变量实现的。
css 伪类方式查看
使用控制台调试器中的 :hov 方式模拟鼠标hover
注意：必须是 :hover 伪类所在的元素上设置才行，可以找到当前块对应的元素，依次往里设置，正常在最外层就能触发。
js 事件方式查看
使用打断点来查看：
- 找到当前元素最外层
- 点击上图红框中的 点点点 , 或者旁边空白地方点击鼠标右键。点击 发生中断的条件 -> 属性修改。（选择完成后，三个点会变成一个蓝色的断点标志）
- 鼠标移入页面中的元素，如果出现断点调试，说明成功了，可以继续下一步。如果没有出现调试页面，说明 js鼠标事件 绑定的不是当前这个元素，打断点的位置不对，需要再往里一层打断点，直到找到为止。
- 当鼠标移入页面元素，出现断点调试后，点击下图中方框内的按钮（任意一个），继续执行，直到出现下拉框为止。
- 此时就可以切换回元素tab查看下拉框内的样式了
ps: 谷歌浏览器控制台语言切换如下图
| 步骤一 | 步骤二 |
|---|---|
