很多小伙伴在开发的时候，大多是在用谷歌开发者工具调试代码（快捷键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. sql语句的一些案列！

    http://www.cnblogs.com/skynet/archive/2010/07/25/1784892.html

  2. jQuery学习之旅 Item10 ajax快餐

    1. 摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章讲解如何使用jQuery方便快捷的实现A ...

  3. 关于 行高lineheight的概念及与Vertical-align、内容框、基线等的关系

    1.关于行高 行高:顾名思意指一行文字的高度.具体来说是指两行文字间基线之间的距离,他也是底线和顶线之间距离   (1)内容区

  4. hibernate入门-基本配置及简单的crud操作

    框架来说主要是需要写大量的配置文件,hibernate相比mybatis来说更强大,移植性更好: 1.类和数据库的映射配置:配置文件命名一般--类名.hbm.xml (user.hbm.xml),与实 ...

  5. 【Windows】关于shift跟空格同时按无反应的解决方案

    在玩游戏中我们经常会遇到各种功能键的使用方法 例如shift跟空格,由于我以前经常要加速大跳,突然发现shift跟空格一起按没有效果,语言设置里也没有相关的快捷键设置到,所以网上查询了一番,至此,问题 ...

  6. （一）JUnit简介

    单元测试是测试应用程序的功能是否能够按需要正常进行,是一个对单一实体(类或方法)的测试. JUnit是一个Java编程语言的单元测试框架. 单元测试框架是一部分代码,可以确保另一端代码(方法)按预期工 ...

  7. java 匿名对象，内部类，修饰符，代码块

    匿名对象是在建对象时只有创建对象的语句方法而没有把对象的地址赋值给变量,匿名对象只能调用一次方法,想再调用时需要再创建一个新的匿名对象 创建普通对象:Person p =new Person(); 创 ...

  8. com.mysql.jdbc.Driver 和 com.mysql.cj.jdbc.Driver的区别 serverTimezone设定

    转自: http://blog.csdn.net/superdangbo/article/details/78732700 com.mysql.jdbc.Driver 和 com.mysql.cj.j ...

  9. Java Script 读书笔记 (三) 函数

    1. 函数作用域 在函数内部定义的变量,外部无法读取,称为"局部变量"(local variable). 变量v在函数内部定义,所以是一个局部变量,函数之外就无法读取. 函数内部定 ...

  10. HTTP 常见状态码解析

    1XX 表示消息 2XX 表示成功 3XX 表示重定向 4XX 表示请求错误 5XX 表示服务器端错误 消息:请求已被接受,需要继续处理.由于 HTTP/1.0 协议中没有定义任何 1xx 状态码. ...