How to debug :hover in Chrome

By on

At times we need to force hover state when we are debugging CSS in style inspector in Chrome developers tools. Chrome supports forcing a certain state on an element. Here are steps to force state :hover on an element in Chrome developers tools.

  1. Open Chrome developer tools and watch the desired element. Click on pin like icon on top right to display options to enable various states as shown below:
    chrome-dev-tools-enable-hover-in-inspector
  2. Select the :hover checkbox to force hover state on selected element.
  3. Once hover state is selected, you will immediately be able to view hover style in inspector as shown in above screenshot (li:hover in current example).

Suggested posts:

  1. How to use fitvids.js for automatically resizing videos
  2. view event handlers in Chrome
  3. How to prevent ssh session freezing due to timeout
  4. jQuery – create iframe with content
  5. jQuery jsonp and cross domain ajax
  6. How to add a user on Linux with sudo access
  7. Bash – how to find last command exit status code
  8. How to do recursive grep with specific file pattern
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in | Tagged , , , ,