See :hover state in Chrome Developer Tools

H

16

973

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?

Haiduk answered 23/12, 2010 at 1:16 Comment(2)

Good question 'cos I was looking for how to edit hover style in Firebug - see here #5389745 – Rosarosabel 17/9, 2013 at 20:36

I know it's not a complete/perfect solution to the problem, but couldn't find a solution in the answers that would work for mouseover events. Using Safari allows you to hover while using browser tools. Hence, just for this problem, consider using another browser. – Noddle 15/8, 2017 at 3:45

V

1445

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.

Verdaverdant answered 21/7, 2011 at 15:25 Comment(4)

Not 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. – Verdaverdant 19/3, 2014 at 15:58

This works for CSS :hover changes, but not if you make changes onhover using JS. – Implode 6/2, 2015 at 16:31

Here's a quick video I threw together demonstrating the :hover state in Chrome 59 if it helps anyone youtu.be/Bklz3lGTFi8 – Feminacy 24/3, 2017 at 7:8

Any1 else having trouble that the 'force element state' buttons are greyed out and not clickable? – Foetor 1/3, 2023 at 17:2

C

61

This was a bit tricky, but here it goes :

Right-click the element, but DON'T move your mouse pointer away from the element
– keep the mouse in hover state.
Choose Inspect via the keyboard: hit the up arrow (🠅), then the Enter key (↵).
If needed, use the up/down arrow to find the correct HTML element in the developer tools.
Look in the developer tools under matched Rules/Styles.
The top CSS selector should be of :hover type.

Cosimo answered 23/12, 2010 at 1:47 Comment(0)

S

37

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

Forcing hover or mouseenter for Bootstrap Tooltips

Sisal answered 23/12, 2014 at 15:25 Comment(3)

This is the best answer – Retharethink 14/5, 2020 at 10:41

I'm getting this error: Uncaught TypeError: $(...).trigger is not a function – Magma 29/7, 2021 at 9:54

@Magma 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: https://mcmap.net/q/49314/-how-to-trigger-event-in-javascript – Sisal 29/7, 2021 at 10:47

N

29

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

Method 01

Method 02

With Firefox Default Developer Toll

With Firebug

Nomography answered 6/1, 2017 at 8:5 Comment(0)

I

9

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:

Indolence answered 4/1, 2016 at 19:22 Comment(1)

duplicate of most of the other posts here. – Tonyatonye 10/5, 2021 at 10:7

L

4

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

Leisurely answered 23/12, 2010 at 1:34 Comment(1)

Great 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! – Haiduk 23/12, 2010 at 19:51

H

4

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!

Hexamerous answered 21/8, 2015 at 23:11 Comment(1)

Going 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. – Appendant 18/2, 2020 at 20:36

T

3

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

Treasurer answered 22/7, 2012 at 15:5 Comment(0)

R

3

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!

Rickard answered 26/6, 2017 at 9:1 Comment(0)

A

3

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.

Aerostatics answered 18/5, 2022 at 12:8 Comment(0)

S

2

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.

Sycee answered 20/5, 2022 at 14:6 Comment(1)

For some reason doesn't work for me, nothing happens even though I get "true" returned when calling dispatchEvent in the Console :D – Unwrap 2/2, 2023 at 9:14

H

1

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.

Hagy answered 18/10, 2013 at 1:26 Comment(1)

i try but window.inspect is not a function , and imposible to import utils ! – Contentment 15/12, 2021 at 1:59

M

1

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.

Mcquiston answered 2/5, 2014 at 10:55 Comment(1)

You do not need to keep your mouse in hover state – Mooney 2/5, 2014 at 11:21

S

1

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.

Superstratum answered 30/1, 2018 at 8:58 Comment(0)

H

0

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!

Hoe answered 1/5, 2022 at 10:56 Comment(0)

P

0

Expanding on @k0pernikus answer above, if you don't have jQuery:

Grab the element selector

Open the Console
Select the element with $('<paste_selector_here>')
Trigger a mouseenter event with dispatchEvent

     $('<paste_selector_here>').dispatchEvent(new Event('mouseenter'))

Then in my case, with a tooltip, the tooltip will be added to the DOM as if your mouse was hovered over it, allowing you to see the styles that are applied while in the :hover state.

Polycrates answered 23/2 at 9:54 Comment(0)

Recommended topics

Hot tags