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?

Solution 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.

Solution 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.

Solution 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.

Solution 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.

Solution 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

View more solutions

Comments

[bryanbraun]

Wow, that actually works, but ONLY if you use this exact sequence of steps. If you don't leave the developer window focused, your keyboard commands won't work properly.

[cautionbug]

Very helpful. Too bad IE continues to make the least useful of browser dev toolkits (this is still the answer for IE10). OP should have accepted this answer. Thank you.

[tenderloin]

Confirming that this does not work in IE11, which makes me hate IE even more.

[Megaroeny]

It definitely doesn't work in IE 11. This sucks... If they had this feature I might be able to not hate it anymore

[Kurt Schindler]

For IE11, see this answer from jason_ruz: stackoverflow.com/a/24691451/104252

[leveluptor]

Works in IE8, i thought i am doomed. Thanks!

[jason_ruz]

I've added a screenshot, hope that helps @Izkata

[Pushkar Mahajan]

Is the "a:" only available on newer (updated) versions of IE11?

[jason_ruz]

@calvinf first try clicking the HTML tag you want to see the hover state on (in the left pane of the DOM Explorer). I just noticed it doesn't seem to show the "a:" until you click something first.