Pseudo-Css Styles for :hover, :active and :focus

As a web developer, being able to inspect HTML and modify styles and layouts in real-time is extremely powerful. So much so that an extension (like the mighty Firebug) are no longer required to access these great features (amongst a ton of others) with many browsers now making it an inbuilt feature

One area that has always been tricky however are active, hover and focus styles. It doesn't matter what ninja like skills you may posses, you won't be quick enough with your mouse to be able to change the styles (trust us, we have a Kung Fu guru here in our office and he isn't able to do it). Thankfully, where there is a will there is a way (at least in Firefox, Chrome and Firebug).

Firebug

 

Chrome

 

Firefox