浏览器捕获hover元素样式

场景：

当鼠标移动到某个元素时，对应的浮框内容或其他节点元素才会显示，鼠标一旦离开某个元素，浮框内容或其他节点元素会马上隐藏起来。
如何用浏览器的开发者工具去捕获这些浮框内容或其他节点元素来调试其样式呢？

解决办法：

如下图：当鼠标移到输入框时，其相应的浮框提示会显示出来，一旦移开鼠标，浮框就会隐藏。

1、打开 开发者工具的【Sources】标签

2、将鼠标移至需要hover控制的元素，然后按 ctrl+竖直线键（即 ctrl + |），代码就会进入断点模式

例如上图，移至输入框，使我需要调试的浮框显示出来.

3、将开发者工具的标签页切换到【Elements】标签，然后用捕获工具去捕获该元素，这样就可以抓到hover时的元素了，也可以修改其样式了