How to Use Chrome Web Inspector to View Hover Code

See :hover state in Chrome Developer Tools

Now you can see both the pseudo-class rules and force them on elements.

To see the rules like :hover in the Styles pane click the small :hov text in the top right.

To force an element into :hover state, right click it and select :hover.

Additional tips on the elements panel in Chrome Developer Tools Shortcuts.

How to use chrome web inspector to view hover code

Now you can see both the pseudo-class style rules and force them on elements.

To see the rules like :hover in the Styles pane click the small dotted box button in the top right.

To force an element into :hover state, right click it.

Alternatively, you can use Event Listener Breakpoints sidebar pane in the Scripts panel and select to pause in mouseover handlers.

Inspect a hover element?

If the hover is triggered by JS, just pause script execution via the keyboard. This is a much simpler way of freezing the DOM than the other answers suggest.

Here's how you do it in Chrome. I'm sure Firefox has an equivalent procedure:

1. Open up Developer Tools and go to Sources.

2. Note the shortcut to pause script execution—F8.

   

3. Interact with the UI to get the element to appear.

4. Hit F8.
5. Now you can move your mouse around, inspect the DOM, whatever. The element will stay there.

Inspect hovered element in Chrome?

I actually found a trick to do that with the Twitter Bootstrap tooltips. If you open the dev tools (F12) on another monitor, then hover over the element to bring up the tooltip, right click as if you were to select 'Inspect Element'. Leaving that context menu open, move the focus over to the dev tools. The html for the tooltip should show up next to the element its a tooltip for in the HTML. Then you can look at it as if it were another element. If you go back to Chrome the HTML disappears so just something to be aware of.

Kind of a weird way but it worked for me so I figured I would share it.

Inspect Javascript Hover in Chrome Developer Tools

Take the below snippet of a menu which shows a dropdown on hover:

$('#menu').hover(  function() {    $('#dropdown').show();  }, function() {    $('#dropdown').hide();  });

#menu {  width: 100px;  background-color: #03f;  color: #fff;  padding: 2px 5px;}#dropdown {  width: 100px;  background-color: #03f;  color: #fff;  padding: 2px 5px;  display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div id="menu">menu</div><div id="dropdown">  <ul>    <li>menu item 1</li>    <li>menu item 2</li>    <li>menu item 3</li>  </ul></div>