How to debug CSS/Javascript hover issues

I often find myself wanting to debug CSS layout issues that involve DOM changes caused by Javascript in reaction to a hover event or different CSS rules applying due to the :hover selector.

Normally, I'd use Firebug to inspect the element that's giving me trouble and see what its CSS properties were, and where those properties come from. However, when hovering is involved, it becomes impossible, because as soon as you move your mouse down to the Firebug panel, the elements you're interested in are no longer hovered, the CSS rules that apply are different, and (in the case of JS hovers) the DOM is changed.

Is there any way I can "freeze" the state of the DOM and application of :hover in order to inspect the DOM as it was during a hover event?

Any other ideas on how to debug this sort of issue are welcome, of course.

You can do this in Firebug but its a little "buggy". If you inspect the element and then click off the the html tab, to the DOM tab for instance, when you go back to the html tab the "style" css tab on the right will have an arrow drop down selector where you can select the :hover state of that element to be active. Sucks to have to switch tabs to get it to show but it works for me.

When inspecting links, Firebug shows the default CSS state, i.e. styles applied to a:link. By default, the :hover and :active styles are not shown. Fortunately, you can change the state of the link by clicking Style and choosing the appropriate option:

Add an onmouseover function handler to the element that is taking the :hover. Inside that function, call console.info(element) on whichever element you'd like to know about.

myHoverElement.onmouseover = function() {
    console.info(document.getElementById("someotherelementofinterest"));
};

When you run this with firebug active, the element will be available to inspect in the firebug console.

In firebug, while in the HTML view, look to the right-side panel and find the "Styles" tab. Click the down arrow and select :hover.

In Firefox (v33.1.1):

• Inspect element (Q)
• In the DOM view right click the element
• select :hover, :active or :focus at the bottom of the context menu

In Chrome (version 35):

• Inspect element
• Inside the elements viewer right click on the element .
• Select "Force element state" -> :active, :hover, :focus, :visited

Some JavaScript toolkits, such as Dojo use CSS classes such as dijitButtonHover to style rather than :hover.

So the Style tab :hover trick doesn't work.

Instead, you can right-click the Node (who's CSS classes change) in the HTML tab, and "Break on Attribute Change"

for css issues, i find web developer plugin invaluable:

http://chrispederick.com/work/web-developer/

load it, then you have 2 possible tools at your disposal.

1. inherited css from files on any moused-over element, use shift-ctrl-y

2. computed css (incuding any inline style= applied that is not in a .css file - or through a .css method from jquery etc) - press shift-ctrl-f

the latter would also return all classes applied to the element.

of course it has other great uses such as, superb debugging of forms, including of editing of hidden fields and cookies (which can be used for penetration testing)

You can also inspect that element, then on the style the tab there should be a little drop down arrow. It will have something like "Show User Agent", "Expand Shorthand Properties", then there should be 2 more under that (I'm guessing that you are inspecting something that has a hover state) :active and :hover select the :hover and you should be golden.

In newer Firefox versions (at least v57 and above), the inspector's UI is slightly different than when the other answers were posted. To enable and freeze the :active/:hover/:focus state of an element, inspect it (right click -> Inspect element) and in the inspector click on:

Result:

Source (images are licensed under CC-BY-SA v2.5, The Mozilla Contributors)

I had the same problem and found that whilst I couldn't inspect hover objects in Firefox with Firebug, Safari's Web Inspector would freeze the current state and allow inspection. To activate Safari's web inspector just enter the following line into the terminal and restart Safari:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

Activate the hover element in the browser, then right click and select 'Inspect Element'. The page will freeze in it's current state allowing you to inspect the fleeting objects to your heart's content.

There is no perfect solution (mouseover/hover-simulation effect) in firebug.

However, there are a couple ways to edit your hover state in firebug:

1. Add an :active state, along with your :hover

   a:hover, a:active { ... }

   If you mouse down on your element, drag off and release, it remains active.

2. Turn the :hover state into a .hover class

You can edit the CSS rule by clicking on the source file (in Firebug's Style tab)

Then of course, you'd add (and remove) the .hover class from your element.

I often make some alternate CSS or Javascript to "freeze" my hovered event; tweak it to perfection with Firebug and put my hover back in place.

Yes, you can right-click "Inspect element" when triggering the hover state. This worked for me in Firebug and WebKit.

I know this post is a bit old, but for those who find this on Google, I created a cross browser tool that allows you to visualize your HTML / CSS layout just by moving the mouse. You can easily view elements in their hover state.

HTML Box Visualizer - GitHub