Inspect a CSS hover element in chrome dev tools

Here is how to view the CSS hover state for an element with the Chrome developer tools and element selector.

Once in Google Chrome and at your webpage, Open the Chrome developer tools by right clicking and selecting “inspect” or by pressing ctrl-shift-i. In the top left of the Dev tools panel is the element selector, circled red in this image:

Chrome dev tools inspect element
Chrome dev tools element inspector

Click that and then choose the element you want to see/modify the hover state off.

For this example I selected a report button on the webpage

chrome dev tools inspect element stylesIn the Styles section you will see :hov and .cls at the top right of the column. Click the :hov and then the :hover toggle which will then toggle the selected element into its hover state:

chrome dev tools inspect element hover stateYou can now see and modify the hover state for that CSS element.