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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

There are several ways to see HOVER STATE styles in Chrome Developer Tools   Method 01    Method 02    With Firefox Default Developer Toll    With Firebug

User · Answer

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

[css] See :hover state in Chrome Developer Tools

Examples related to css

Examples related to google-chrome

Examples related to hover

Examples related to state

Examples related to google-chrome-devtools