很多小伙伴在开发的时候，大多是在用谷歌开发者工具调试代码（快捷键F12 或 Ctrl-Shift-i）。

　　可能会经常遇到需要调试hover样式的时候，一般都是直接改代码，然后在页面上刷新查看效果。

　　其实，这里有个小技巧，用谷歌开发者工具就可以方便的查看hover样式

　　方法一（鼠标右键想查看hover样式的元素，选择检查或审查元素。这样就能在截图右边看到hover效果的样式代码）

　　注：这里鼠标右键选择检查或审查元素后一定不要把鼠标移到开发者工具外，

　　　　要始终在开发者工具内。不然无法看到hover样式。

　　　　这时候开发者工具的显示方式建议为截图中的向下显示，

　　　　并且让开发者工具尽量靠近要审查的元素，这样鼠标才不容易离开开发者工具

　　

　　方法二（推荐）

　　　　点击开发者工具右边:hov选项以后，会出现红色框的内容，然后把:hover选项勾上，这样就能看到审查元素的hover样式代码）

　　注：在开发者工具Elements面板找到该元素,右键该元素选择Force-state选项里面的hover选项，

　　　　也能查看hover样式代码。效果同方法二，此时该元素前面会有一个橘黄色的小圆圈　

　　　　

　　

chrome谷歌开发者工具（hover时候的css样式怎么在浏览器调试）的更多相关文章

  1. Chrome/谷歌开发者工具分析

    Chrome/谷歌开发者工具还是要好好掌握一下,对于前端开发超级有用:https://developers.google.com/web/tools/chrome-devtools/ 1.js内存使用 ...

  2. Chrome 谷歌开发者工具使用窍门

    我们这里介绍主要的几块:Console.Source.Network Console 大家都有用过各种类型的浏览器,每种浏览器都有自己的特色,本人拙见,在我用过的浏览器当中,我是最喜欢Chrome的, ...

  3. 【转】Chrome——F12 谷歌开发者工具详解

    Chrome——F12 谷歌开发者工具详解 console source network

  4. [转帖]前端-chromeF12 谷歌开发者工具详解 Network篇

    前端-chromeF12 谷歌开发者工具详解 Network篇 https://blog.csdn.net/qq_39892932/article/details/82493922 blog 也是原作 ...

  5. [转帖]前端-chromeF12 谷歌开发者工具详解 Sources篇

    前端-chromeF12 谷歌开发者工具详解 Sources篇 原贴地址:https://blog.csdn.net/qq_39892932/article/details/82498748 cons ...

  6. [转帖]前端-chromeF12 谷歌开发者工具详解 Console篇

    前端-chromeF12 谷歌开发者工具详解 Console篇 https://blog.csdn.net/qq_39892932/article/details/82655866 趁着搞 cloud ...

  7. Chrome的开发者工具(Chrome Developer Tools)

    Chrome的开发者工具(Chrome Developer Tools) 按F12 https://developer.chrome.com/devtools/index http://www.w3s ...

  8. F12谷歌开发者工具preserve log

    谷歌开发者工具里面这个preserve log :保留请求日志,跳转页面的时候勾选上,可以看到跳转前的请求,也可适用于chrome开发者工具抓包的问题

  9. Mac下safari、chrome打开开发者工具快捷键

    mac下safari和chrome打开开发者工具的快捷键相同,都是option(alt)+command+i 这个是我的默认配置,没有更改过的.

随机推荐

  1. java中的取整（/）和求余（%）

    1.取整运算符取整从字面意思理解就是被除数到底包含几个除数,也就是能被整除多少次,那么它有哪些需要注意的地方呢?先看下面的两端代码: int a = 10; int b = 3; double c= ...

  2. JVM堆内存监测的一种方式，性能调优依旧任重道远

    上月,由极客邦.InfoQ和听云联合主办2016 APMCon中国应用性能管理大会圆满落下帷幕.会上,Java冠军Martijn Verburg进行了一场Java and the Machine的分享 ...

  3. Elasticsearch: 权威指南 » 深入搜索 » 多字段搜索 » 多数字段 good

      跨字段实体搜索  » 多数字段编辑 全文搜索被称作是 召回率(Recall) 与 精确率(Precision) 的战场: 召回率 ——返回所有的相关文档:精确率 ——不返回无关文档.目的是在结果的 ...

  4. Grafana简单使用

    下载安装 Grafana也是用GO语言写的,无任何依赖,安装非常简单. 启动 sudo service grafana-server start 运行 直接访问:http://your_ip:3000 ...

  5. forwardport--源码笔记--注释

    failed:", err.Error())             }         }()     }     //     log.Println("forwardPort ...

  6. Hibernate用注解生成表

    User.java实体来 package com.tao.pojo; import javax.persistence.Column; //用注解的方式生成表 import javax.persist ...

  7. C++中的静态类型和动态类型的定义

    当我们使用存在继承关系的类型时,必须将一个变量或者其他表达式的静态类型与该表达式表示对象的动态类型区分开来. 表达式的静态类型在编译时总是已知的,它是变量声明时的类型或者表达式生成的类型: 而动态类型 ...

  8. BZOJ_1031_[JSOI2007]字符加密Cipher_后缀数组

    BZOJ_1031_[JSOI2007]字符加密Cipher_后缀数组 Description 喜欢钻研问题的JS同学,最近又迷上了对加密方法的思考.一天,他突然想出了一种他认为是终极的加密办法 :把 ...

  9. Python3字符串替换replace()，translate()，re.sub()

    Python3的字符串替换,这里总结了三个函数,replace()和translate()和re.sub() replace() replace() 方法把字符串中的 old(旧字符串) 替换成 ne ...

  10. 【移动端web】软键盘兼容问题

    软键盘收放事件 这周几天遇到了好几个关于web移动端兼容性的问题.并花了很长时间去研究如何处理这几种兼容问题. 这次我们来说说关于移动端软键盘的js处理吧. 一般情况下,前端是无法监控软键盘到底是弹出 ...