See :hover state in Chrome Developer Tools

Question

I want to see the :hover style for an anchor I'm hovering on in Chrome. In Firebug, there's a style dropdown that allows me to select different states for an element. I can't seem to find anything similar in Chrome. Am I missing something?

Answer 1

In case it helps, this seems to be easier in the latest Chrome (47.0.2526.106):

Inspect element and then click on the three white dots in the left gutter:

Then choose the desired element state from this dropdown:

Answer 2

EDIT: This answer was before the bug fix, see tnothcutt's answer.

This was a bit tricky, but here goes:

• Right-click element, but DON'T move your mouse pointer away from the element, keep it in hover state.
• Choose inspect element via keyboard, as in hit up arrow and then Enter key.
• Look in developer tools under Matched CSS Rules, you should be able to see :hover.

PS: I tried this on one of your question tags.

Answer 3

There are several ways to see HOVER STATE styles in Chrome Developer Tools.

Method 01

Method 02

With Firefox Default Developer Toll

With Firebug

Answer 4

I could see the style by following below steps suggested by Babiker - "Right-click element, but DON'T move your mouse pointer away from the element, keep it in hover state. Choose inspect element via keyboard, as in hit up arrow and then Enter key."

For changing style follow above steps and then - Change your browser tab by pressing ctrl + TAB on the keyboard. Then click back on the tab you want to debug. Your hover screen will still be there. Now carefully take your mouse to developer tool area.

Answer 5

In my case, I want to dubug bootstrap tooltip. But the methods above not work for me. I guess bootstrap implemented this by something like mouse in/out event.

Anyway, when I hover on a button, it will generate a brother html element below the button, so I select the button's parent element in "Elements" tab of "Developer tools" window, hover the button, and "Ctrl + C", then I can paste the source code which contains the generated code. Last find the generated code, and add it to the source code by "Edit as HTML" in "Elements" tab.

Hope it can help somebody.

Answer 6

I know that what I do is quite the workaround, however it works perfectly and that is the way I do it everytime.

Then, proceed like this:

• First make sure Chrome Developer Tools is undocked.
• Then, just move any side of the Dev Tools window to the middle of the element you want to inspect while hovered.

• Finally, hover the element, right click and inspect element, move your mouse into the Dev Tools window and you will be able to play with your element:hover css.

Cheers!