How to Use Chrome Web Inspector to view pseudo class (eg. :hover ) effects?

[Richard]

Is there a way in which I can inspect an element when it is being
hovered over?

For example I have a css implemented drop down menu button and want to
be able to view the styles that are activated when the element is
hovered over (in the same way that I would inspect an element by
selecting it in the inspector, but allowing me to show what the css
cascade is when the element is being hovered over)

In firebug there is a feature that allows you to choose to view the
':hover' effect once you have selected an element to inspect.
I am sure that there must be a way to do this that some of you have
found since debugging odd hover behaviors must be pretty common.
I was even wondering if there might be a way to programmatically force
a hover event for the specific dom element (a menu button, eg) and
then view the css cascade that kicks into effect?

Many thanks in advance. I searched the forum but couldn't find an
answer yet.

[Alexander Pavlov]

Hello Richard,

This feature is tracked in WebKit as https://bugs.webkit.org/show_bug.cgi?id=62853 (work in progress) and http://code.google.com/p/chromium/issues/detail?id=67871 in Chromium. In short, it is going to be implemented roughly the same way as in Firebug.

--
-alexander

[Richard Hellyer]

Thanks Alexander .. that is good to know and I'll stay tuned!

richard