InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

Chrome developer tools

  • Chrome - copy as cURL
  • Chrome - how to access pre-release features
  • Chrome - useful internal urls (chrome://)
  • Chrome - view javascript errors
  • Edit and debug css in Chrome
  • How to detach Chrome developer tools window
  • View http headers in Chrome
  • clear Chrome HTTP 301 redirect cache
  • custom http request headers
  • how to debug :hover
  • how to debug javascript in Chrome
  • view event handlers in Chrome
 
  • Home
  • > Tutorials
  • > Web Development
  • > Chrome developer tools

How to debug :hover in Chrome

By admin on Dec 13, 2015

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. Edit and debug css in Chrome
  2. Debug javascript using node-inspector, node-debug, nodemon and Chrome
  3. how to debug javascript in Chrome
  4. view event handlers in Chrome
  5. CSS menu using css pseudo element :hover
  6. CSS pseudo class :hover
  7. View http headers in Chrome
  8. How to clear Chrome HTTP 301 redirect cache
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged Chrome developer tools, CSS, CSS Pseudo Classes, Tutorials, Web Development

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2023 InfoHeap.

Powered by WordPress