See :Hover State in Chrome Developer Tools

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.

Toggle element state

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

Force element state

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

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.

    Pause script execution

  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.

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.

Inspecting Hover-state in Firebug or Chrome DevTools

Chrome Dev Tools has a built-in :hover state selector in the Elements > Styles panel. You can toggle other pseudo-classes (like :active) there as well.

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>

Inspecting Hover-state in Firebug or Chrome DevTools

Chrome Dev Tools has a built-in :hover state selector in the Elements > Styles panel. You can toggle other pseudo-classes (like :active) there as well.



Related Topics



Leave a reply



Submit