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.

https://i.stack.imgur.com/NwulC.png

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

https://i.stack.imgur.com/XzMCB.png

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

---

EDIT: This answer was before the bug fix, see tnothcutt's answer.

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.

---

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

https://i.stack.imgur.com/SPXgF.png

---

There are several ways to see HOVER STATE styles in Chrome Developer Tools.

Method 01

https://i.stack.imgur.com/CL151.gif

Method 02

https://i.stack.imgur.com/804Ob.gif

With Firefox Default Developer Toll

https://i.stack.imgur.com/YUsgZ.gif

With Firebug

https://i.stack.imgur.com/laET3.gif

---

In case it helps, this seems to be easier in the latest Chrome (47.0.2526.106):

https://i.stack.imgur.com/0bZyw.png

https://i.stack.imgur.com/kqBfs.png

---

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

---

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

https://i.stack.imgur.com/u341A.png

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.

https://i.stack.imgur.com/ZF6Ic.jpg

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!

---

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

---

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

1) Right click in your page and select inspect

https://i.stack.imgur.com/NFf9H.png

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

https://i.stack.imgur.com/zNXE2.png

https://i.stack.imgur.com/f4wrf.png

4) Then tick the hover

https://i.stack.imgur.com/lLkqR.jpg

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

---

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.

---

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.

---

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.

---

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!

---

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.

https://i.stack.imgur.com/0LNS3.png

---

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

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

---