How to edit focus, hover etc. effect properties of elements on the fly by Chrome, Firefox and Internet explorer

Question

One can change the design of any html element on the fly thanks to "Inspect element" tool of Chrome and Firefox, and with Developer tools of Internet Explorer. But how can I see and modify the on hover, on focus like action triggered design choices

• in Chrome
• in Firefox
• in İnternet Explorer ?

These browsers are enough for me but if you give information for other common ones, it may be useful for someone else.

Thanks.

Answer 1

The image below shows how it's possible in Chrome.

In Firebug you can right click on the area under the style tab and add a new rule that contains the pseudo selector you need to test.

I am unsure about IE

Hope it helps

Answer 2

Adding to the answer by grimmus in Internet Explorer you can have developer tools option by pressing the F12 key

Most Commonly used developer tools are

1.Firebug
2.Web Developer tools(Both Firefox and chrome)
3.The latest version of Firefox has an embedded developer tools option in Chrome also   you can inspect the elements