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.
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:
- Open up Developer Tools and go to Sources.
Note the shortcut to pause script execution—F8.
Interact with the UI to get the element to appear.
- Hit F8.
- 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
Select Every Nth Element in Css
Transparent Text Cut Out of Background
How to Prevent Less from Trying to Compile CSS Calc() Properties
How to Override Inline Styles With External Css
Is There a CSS Selector by Class Prefix
Z-Index Not Working With Fixed Positioning
Border-Radius in Percentage (%) and Pixels (Px) or Em
When to Use Margin VS Padding in Css
Using CSS to Affect Div Style Inside Iframe
Css - Why Doesn't Percentage Height Work
How to Show Only Corner Borders
Css Auto Hide Elements After 5 Seconds
Css @Media Print Issues With Background-Color;
React - Component Full Screen (With Height 100%)
Add Footer Text in Each Page of Pdf Using CSS
How to Set the Size of a Column in a Bootstrap Responsive Table
Advantages of Using Display:Inline-Block VS Float:Left in Css