34

In both Google Chrome and Firefox, the hover and active state CSS properties can only be viewed when the element is hovered or clicked. However, as soon as my mouse leaves the element or I release my mouse, I cannot view the properties any more.

Is there a Chrome extension or Firefox addon that can allow me to view the elements in hover or active states?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Leo Jiang
  • 24,497
  • 49
  • 154
  • 284

2 Answers2

27

Click on the element inside the element inspector. Move your mouse over the element, press the up arrow key and then the down arrow key. You'll see the hover properties.

henryaaron
  • 6,042
  • 20
  • 61
  • 80
  • Great tip. Additionally, press the tab key (after pressing the up and down arrow keys on chrome) if you want to scroll through the css properties. – Amir Sep 05 '14 at 00:29
  • 18
    In recent Firefox versions you can just right click an element in the element inspector and set the desired state. See [DOM Inspector FAQ](https://developer.mozilla.org/en-US/docs/DOM_Inspector/DOM_Inspector_FAQ#.C2.A0How_do_I_inspect_pseudo-classes_and_pseudo-elements_in_the_CSS_Rules_viewer.3F) – daniels Dec 09 '14 at 10:24
8

Both Firebug and the DOM Inspector extension for Firefox allow you to inspect :hover and :active state on arbitrary elements, as I recall.

Boris Zbarsky
  • 34,758
  • 5
  • 52
  • 55
  • 3
    Does this still work in firefox 29? I can't seem to find the hover menu as before. – But those new buttons though.. May 28 '14 at 19:56
  • @billynoah It definitely works in DOM Inspector, which is what I typically use. – Boris Zbarsky May 29 '14 at 04:22
  • you using firefox 29? i actually read this article (https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#Selecting-Elements) about how they changed the behavior to have a drop down menu for each element in the html pane instead of in the webpage itself. it's pretty actually - just confused me since i was used to the old way. – But those new buttons though.. May 29 '14 at 05:09
  • @billynoah Well, I'm using a nightly. Also, I'm using the DOM Inspector extension from https://addons.mozilla.org/en-US/firefox/addon/dom-inspector-6622/ not the built-in devtools that page is about. – Boris Zbarsky May 29 '14 at 15:22
  • 31
    In recent Firefox versions, just **right-click the DOM node you're interested in** from the inspector. – Wilfred Hughes Sep 16 '14 at 16:24
  • @WilfredHughes That should be the accepted answer. – Nathan Arthur Jun 29 '15 at 16:37
  • 11
    It seems Firefox 41 now has better controls to apply the hover, active, and focus pseudo-classes. I'm leaving this here just for reference. https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Setting_hover_active_focus – Carlos Garcia Jul 23 '15 at 21:30
  • There's a slight annoyance for me in FF 44 When forcing an element hover, clicking on another element resets the forced hover, is there a way to disable this behavior from Firefox Config (about:config)? or another way? – Jomar Sevillejo Nov 09 '15 at 06:13