Developer Tools: Debug :hover etc. in Chrome


Did you ever try to get a css style for a hovered or active button or link? Today I tried to figure out, why the bootstrap btn-success don’t accepts my :active state style. Searching for a way to get this brings me to the simple solution:

Open developer tools in chrome (ctrl-shift-i or F12), select  the element (crtl-shift-c or the most left button in the menu bar) and then see this:

dev-tools

Click on the dotted button to get the context menu for this element:

dev-tools-states

Select the states you need and you will see the corresponding style in the style window and on the webpage.

In my case it was the combination of to states:

.btn:active:hover

and not only :active.

Leave a Reply