07 Chrome browser captures hover element style

Problem description ：

We are developing web There are bound to be a lot of hover Element panel , One feature of these panels is ： When we move the mouse to a icon Or text , The corresponding panel will display , As soon as the mouse leaves icon Or words , The panel will be hidden immediately . So when we want to use Chrome It becomes difficult for browser developers to capture these panels to debug their styles .

As shown in the figure below, the gray submenu panel is a hover Element panel , It will only be displayed when we move the mouse to the corresponding main menu option , When the mouse leaves the main menu option, it will hide , So we can't capture it through the capture icon in the lower left corner of the developer tool .

Let me introduce you to this little article , How to catch these hover Elements .

resolvent ：

1、 Open developer tools , Switch the tab in the debug panel to 【Sources】 panel , Here's the picture ：

2、 Move the mouse to the control hover Element displays icon Or in words , Put it hover Element display , as follows ：

3、 Don't move the mouse at this time , Always placed in the current icon Or in words , We press the keyboard shortcut for breaking points in debugging code , Pause code execution , as follows ：

notes ： The shortcut key of breakpoint here is if Mac User's press 【command+delete The vertical line key directly below 】, If it is windows The user's words should be 【ctrl+delete The vertical line key directly below 】, Specific information can be found on Baidu .

4、 Then we switch the tab of the developer tool to 【Elements】 panel , Then use the capture tool to capture this hover Elements , Now you can capture , You can also modify the style at will , as follows ：