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:

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

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

You can now see and modify the hover state for that CSS element.