It's possible that I'm just missing something obvious, but to my knowledge, chrome dev tools and firebug don't show you what :hover css rules apply to a selected element. Is there way to change that?
In Firefox, firebug only shows the :hover rules when you're actually hovering over the element in question. However, in the right-hand element pane, if you click the drop-down arrow next to "Style", you can check :active or :hover to always show them for that element.
(Using Firebug 1.5.4 in Firefox 3.6.10)
Edit: Chrome doesn't seem to change the css display when you hover. Thus I wasn't able get it to display the hover rules for an element that I browsed to in the html tree view.
However, when I use either the "Select an element to inspect it" magnifier icon, or the "Inspect Element" right-click option, it does display the :hover rules.
In most cases, the stylesheet link from the normal element rules should get you pretty close to the applicable :hover rules, since people tend to put them near each other. Of course, this isn't as nice as the computed styles from firebug/dev tools, since you can't tell if the rules were overridden elsewhere.