See :hover state in Chrome Developer Tools

Now you can see both the pseudo-class rules and force them on elements.

To see the rules like :hover in the Styles pane click the small :hov text in the top right.

Toggle element state

To force an element into :hover state, right click it and select :hover.

Force element state

Additional tips on the elements panel in Chrome Developer Tools Shortcuts.


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.


I wanted to see the hover state on my Bootstrap tooltips. Forcing the the :hover state in Chrome dev Tools did not create the required output, yet triggering the mouseenter event via console did the trick in Chrome. If jQuery exists on the page you can run:

$('.YOUR-TOOL-TIP-CLASS').trigger('mouseenter');

Forcing hover or mouseenter for Bootstrap Tooltips


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

Method 01

enter image description here

Method 02

enter image description here

With Firefox Default Developer Toll

enter image description here

With Firebug

enter image description here


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:
click on the three white dots

Then choose the desired element state from this dropdown:
this dropdown