Inspecting rollover elements in Chrome and Firefox

For some reason, this was never apparent to me but it is actually pretty straightforward. I used to use tricks to inspect rollover elements like changing the CSS display: none to display: block inline with Firebug. But there is actually a much easier way to test these elements.

In Chrome’s Web Inspector, simply use the Elements panel and click on the element, when hovered over, triggers a drop down menu. On the right-hand side of the Inspector, where the element’s CSS information is shown, there is an icon of a mouse pointer hovering over a dashed box. Click that, and you will be given options to change the state of the element. You can change the element’s state for active, hover, focus, and visited.

In Firefox, using Firefox, doing this is just as easy. Inspect an element with Firebug and choose the item in the HTML panel. On the right-hand side, you will see the Style information for the selected element. The tab for the Style panel has a little down arrow to the right of the label. Click that and among the options are hover, active and focus. Click on hover and you can style the item that is hidden until triggered by a rollover.