How to debug CSS/Javascript hover issues
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.