How to Display Firebug Hover Styles Persistently in Console Side Panel

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
Jerry LOperations ManagerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Steve BinkCommented:
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.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Jerry LOperations ManagerAuthor Commented:

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
Steve BinkCommented:
Another option: use Chrome and its internal dev tools.  You can set the state, and it stays.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.