See :hover state in Chrome Developer Tools

Question

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?

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

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

Answer 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');

Answer 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

Answer 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:

Then choose the desired element state from this dropdown:

Answer 6

I know that what I do is quite the workaround, however it works perfectly and that is the way I do it everytime.

Then, proceed like this:

• First make sure Chrome Developer Tools is undocked.
• Then, just move any side of the Dev Tools window to the middle of the element you want to inspect while hovered.

• Finally, hover the element, right click and inspect element, move your mouse into the Dev Tools window and you will be able to play with your element:hover css.

Cheers!

Answer 7

I don't think there is a way to do this. I submitted a feature request. If there is a way, the developers at Google will surly point it out and I will edit my answer. If not, we will have to wait and watch. (you can star the issue to vote for it)

---

Comment 1 by Chrome project member: In 10.0.620.0, the Styles panel shows the :hover styles for the selected element but not :active.

---

(as of this post) Current Stable channel version is 8.0.552.224.

You can replace your Stable channel installation of Google Chrome with the Beta channel or the Dev channel (See Early Access Release Channels).

You can also install a secondary installation of chrome that is even more up to date than the Dev channel.

... The Canary build is updated even more frequently than the Dev channel and is not tested before being released. Because the Canary build may at times be unusable, it cannot be set as your default browser and may be installed in addition to any of the above channels of Google Chrome. ...

Answer 8

I was debugging a menu hover state with Chrome and did this to be able to see the hover state code:

In the Elements panel click over Toggle Element state button and select :hover.

In the Scripts panel go to Event Listeners Breakpoints in the right bottom section and select Mouse -> mouseup.

Now inspect the Menu and select the box you want. When you release the mouse button it should stop and show you the selected element hover state in the Elements panel (look at the Styles section).

Answer 9

Changing to hover status in Chrome is pretty easy, just follow these steps below:

1) Right click in your page and select inspect

2) Select the element you like to have inspect in the DOM

3) Select the pin icon (Toggle Element State)

4) Then tick the hover

Now you can see the hover state of the selected DOM in the browser!

Answer 10

For me in order to debug this tooltip i click on toggle device toolbar to switch to mobile view and then click on div that has the hover effect, you can also click on focus-visible to see the spacing between the div and tooltip, hope this will help.

Answer 11

I think this is no longer an issue in Chrome but just in case. I wrote this jQuery script to inspect the DOM when I move around with the TAB key.

If changed to use 'mouseover', would look like this:

$("body *").on('mouseover', function(event) {       
    console.log(event.target);      
    inspect(event.target);
    event.stopPropagation();
});

You can easily modify it to remove the event handler whenever you click or do something on an element you want to stop at.

Answer 12

I could see the style by following below steps suggested by Babiker - "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."

For changing style follow above steps and then - Change your browser tab by pressing ctrl + TAB on the keyboard. Then click back on the tab you want to debug. Your hover screen will still be there. Now carefully take your mouse to developer tool area.

Answer 13

In my case, I want to dubug bootstrap tooltip. But the methods above not work for me. I guess bootstrap implemented this by something like mouse in/out event.

Anyway, when I hover on a button, it will generate a brother html element below the button, so I select the button's parent element in "Elements" tab of "Developer tools" window, hover the button, and "Ctrl + C", then I can paste the source code which contains the generated code. Last find the generated code, and add it to the source code by "Edit as HTML" in "Elements" tab.

Hope it can help somebody.

Answer 14

It is possible to trigger the MouseEvent on elements using JS. Here is how to do it for hover.

1. Inspect the element using right click.
2. Copy JS path like this
3. Open console in Sources Chrome DevTools by pressing "Esc" key.
4. Then paste the copied path and append it with .dispatchEvent(new MouseEvent('mouseover', { 'bubbles': true })); like this:
5. Press enter and then you can interact with any DOM changes happening after hover state.

Answer 15

It's also possible that the code can be hidden in the database and there is no actual file containing it. A client of mine has the "Travelify" theme by Colorlib and some of the options from the WP admin GUI write directly to the DB and the DB generates the css code on the fly - I can see the css in html source but nowhere in any actual files. This drove me crazy and took me awhile to figure out. There's a great DB search tool for WP called "Search and Replace" by Inpsyde GmbH that I have found to be invaluable. Be careful with it of course!

Cheers!