See :hover state in Chrome Developer Tools
Solution 1
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.
Solution 2
EDIT: This answer was before the bug fix, see tnothcutt's answer.
This was a bit tricky, but here goes:- Right-click element, but DON'T move your mouse pointer away from the element, keep it in hover state.
- Choose inspect element via keyboard, as in hit up arrow and then Enter key.
- Look in developer tools under Matched CSS Rules, you should be able to see :hover.
PS: I tried this on one of your question tags.
Solution 3
I wanted to see the hover state on my Bootstrap tooltips. Forcing the the :hover
state in Chrome dev Tools did not create the required output, yet triggering the mouseenter
event via console did the trick in Chrome. If jQuery exists on the page you can run:
$('.YOUR-TOOL-TIP-CLASS').trigger('mouseenter');
Solution 4
There are several ways to see HOVER STATE styles in Chrome Developer Tools.
Method 01
Method 02
With Firefox Default Developer Toll
With Firebug
Solution 5
In case it helps, this seems to be easier in the latest Chrome (47.0.2526.106):
Inspect element and then click on the three white dots in the left gutter:
Comments
-
Ben almost 2 years
I want to see the
:hover
style for an anchor I'm hovering on in Chrome. In Firebug, there's a style dropdown that allows me to select different states for an element.I can't seem to find anything similar in Chrome. Am I missing something?
-
Ben over 13 yearsGreat investigation. I'm rocking the latest dev build (10.0.612.3) so I'll just wait a bit and hopefully I'll see the :hover goodness!
-
Travis Northcutt over 10 yearsNot sure when this changed, but you can now right click -> force element state (from the elements pane) on other elements (not just
<a>
elements) now. -
Zachary Kniebel about 10 yearsYou do not need to keep your mouse in hover state
-
matthew_360 over 9 yearsThis works for CSS :hover changes, but not if you make changes onhover using JS.
-
RoccoB over 7 yearsHere's a quick video I threw together demonstrating the :hover state in Chrome 59 if it helps anyone youtu.be/Bklz3lGTFi8
-
cfranklin over 4 yearsGoing to add a comment so I can find this again, because I know I'm going to need it! Especially important for unpredictable third party UI plugins.
-
Argun about 4 yearsThis is the best answer
-
5Diraptor about 3 yearsduplicate of most of the other posts here.
-
alansiqueira27 almost 3 yearsI'm getting this error:
Uncaught TypeError: $(...).trigger is not a function
-
k0pernikus almost 3 years@alansiqueira27 Then the site has no jQuery included (it becomes less and less common for it to be there). You have to use plain old javascript. Maybe that will work: stackoverflow.com/a/50587874/457268
-
jon over 2 yearsi try but
window.inspect is not a function
, and imposible to import utils !