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?

1 answer

Ransom 35
2
points

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.

(Chrome 6.0.472.63)

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.

Answered about 6 years ago by Ransom
  • Thanks for pointing that out. Do you know of a similar method for Chrome? tnorthcutt about 6 years ago