See :hover state in Chrome Developer Tools

 

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?

Now you can see both the psuedo-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.

切换元素状态

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

强制元素状态

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');

    强制悬停或鼠标输入Bootstrap Tooltips

    链接地址: http://www.djcxy.com/p/20466.html

    上一篇: 如何重新定位Chrome开发者工具

    下一篇: 请参阅：Chrome开发人员工具中的悬停状态