Is there a way to test CSS :hover in IE Developer tools?

Question

In Chromes Dev Tools, you can select an element and enable the hover state. Is there a way that this can be done in Internet Explorers Dev Tools?

Answer 1

I am not sure what version of IE you were using when you asked this question.

Just for everyone's information, I am able to view the hover style through the HTML tab by using the following sequence of steps in IE 9:

1. Open the developer tool
2. Hover over the element you want to view its hover CSS while leaving the developer window focused.
3. Press F5 while your mouse is still over the element
4. Ctrl + B and click on the element

You can now view the hover CSS.

Edit (Jan 2015):

In IE 11, you click the large blue "a:" icon that appears in the top right of the Styles pane of the DOM Explorer, and then check the "Hover" checkbox.

Answer 2

In IE11, you click the large blue "a:" icon that appears in the top right of the Styles pane of the DOM Explorer, and then check the "Hover" checkbox.

If you can't see the "a:", select an element or HTML tag in the left pane of the DOM Explorer first.

Answer 3

I couldn't find the CSS :hover state in IE developer tools either. So I just ended up using Firebug Lite from a bookmarklet.

Answer 4

Lao Lei's suggestion works. When you open the developer tools, be sure it is being on focus so it can receive the shortcut commands - when you click on the scrollbar of the page or on the page it focuses the browser window and makes all shortcut commands be send to the page. To avoid mistakes do the following:

1. find the element you need
2. Open the developer tools
3. focus the developer tools' window
4. hover the element you want
5. Press F5 without moving the mouse
6. Ctrl+B and click on the element

Best Regards.

Answer 5

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