Using Firebug To Modify :hover State

I didn’t know for the longest time how to easily modify hover states on-the-fly. I thought Firebug had no features like this, but I guess I was wrong.

Take a look at this quick video that shows how this can be done!

If you have any other hidden Firebug secrets, please share them in the comments below!

Written by brenelz

Hello everyone, I'm Brenley Dueck or better known as Brenelz. I currently run my own business called Brenelz Web Solutions which focuses primary on winnipeg website design. The web technologies I most specialize in are CSS, jQuery, AJAX, PHP, and the MySQL database. Please make sure to follow me on twitter.

4 Responses to “Using Firebug To Modify :hover State”

Elijah Manor Says:
August 3rd, 2011 at 6:20 am
The Chrome dev tools also has this feature (dev branch or canary build)
See tip #5 http://www.elijahmanor.com/2011/08/7-chrome-tips-developers-designers-may.html
RKD Says:
August 10th, 2011 at 3:09 pm
Very cool, I didn’t think this was possible.
Satya Prakash Says:
January 25th, 2012 at 3:39 am
I face problem when js is working on hover state. In this case it does not help. Ex. floating div on hover over one div. Then this firebug:hover does not cause floating div to come. and when I bring overlay/floating div by mouse over-ing it then when I come to firebug for checking other css-es then that floating div goes many times.
High Performance Sites Winnipeg Says:
February 12th, 2012 at 1:16 pm
Great find. I too just found this feature, and it certainly makes life a lot easier. Rather than muddling through lines and lines of code, you simply turn it on/off and modify at will.
Its my newest fave in my collection of tools! Nice Post!