How to Display Firebug Hover Styles Persistently in Console Side Panel

Jerry L
Jerry L used Ask the Experts™
Windows 7 Desktop
Firefox v42.0
Firebug v2.0.13

When I attempt to view the CSS code for an element in its hover state, I've enabled the :hover option, then I hover the mouse cursor over the element in the browser window above the Firebug console. The code then appears in the console side panel. However, as soon I move the mouse cursor to that console sidebar so that I can select and copy the text of the code; that code has already disappeared (because the mouse is no longer hovering over the element.)

How to make the CSS :hover code display persistently (freeze it) in the side panel so I can highlight, then copy and paste it?

Firebug Side Panel with Hover option enabled
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2004
After you select the :hover state, don't actually hover over the element.  Instead, examine the style rules and find the ones applying to the :hover state.
Jerry LOperations Manager



First of all, thank you for replying to my post. Based on the time it took between posting my EEQ and getting a reply, it would seem that Firebug does not provide the functionality I am proposing. (Do I smell a feature request?) . I would assume that Firebug is used by such a large number of developers on EE that, if there were a solution, this post would probably have gotten a reply within an hour, but instead it took almost twelve!

Perhaps that is an incorrect assumption, but nonetheless, what you are proposing is indeed a viable workaround. The situation is similar to what happened with Snagit, the screen capture tool by TechSmith. When you hover over a menu item in the browser or any other desktop application, the hover-activated items quickly disappear and there is no way to capture the image of the menu in the hover state; it is functionality they had to explicitly provide in their software. And, as I am thinking of this example right now, I suddenly realize that screen capture is yet another workaround. However, in this case, since I want to be able to copy and paste the text, not just an image of it, your suggestion is perhaps the best option available for the current version of Firebug.

I just tried the suggested workaround and found that the hover code is substantially different than the non-hover code (see attached screen capture images.) Nonetheless, it provides me with some ideas I can work with.

Using your suggestion, the best solution for now is to, first, copy and paste the non-hover code into the stylesheet text file. Next, and this is the tricky part... first, place your cursor in the text file where you want to enter the code. Then hover over the element in question. Then without pressing any mouse buttons, begin typing. That way, the mouse cursor remains over the element so you can view the code in the console and, at the same time, type code into the text file.

Non-Hover Code Hover Code
Top Expert 2004

Another option: use Chrome and its internal dev tools.  You can set the state, and it stays.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial