很多小伙伴在开发的时候，大多是在用谷歌开发者工具调试代码（快捷键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. Mybatis通过注解方式实现批量插入数据库 及 常见的坑

    原文地址:http://f0rb.iteye.com/blog/1207384 MyBatis中通过xml文件配置数据库批量操作的文章很多,比如这篇http://www.cnblogs.com/xcc ...

  2. React Native系列(6) - 编译安卓私有React-Native代码

    为何要自己编译React Native安卓私有代码 我们在开发中遇到一个HTTP2的问题,React Native安卓客户端在和HTTP2支持的服务器通讯的过程中会有crash,见 React-Nat ...

  3. Python2 与 Python3 的编码对比

    在 Python 中,不论是 Python2 还是 Python3 中,总体上说,字符都只有两大类: 通用的 Unicode 字符: (unicode 被编码后的)某种编码类型的字符,比如 UTF-8 ...

  4. scrapy分布式爬虫scrapy_redis一篇

    分布式爬虫原理 首先我们来看一下scrapy的单机架构:     可以看到,scrapy单机模式,通过一个scrapy引擎通过一个调度器,将Requests队列中的request请求发给下载器,进行页 ...

  5. Java 保留两位小数填坑

    下面直接上代码: DecimalFormat df1 = new DecimalFormat("#.00");DecimalFormat df2 = new DecimalForm ...

  6. hibernate 增改查后对象的三种状态转换

    this.getSession().update(obj); this.getSession().merge(obj); this.getSession().saveOrUpdate(obj);1. ...

  7. python 简单的信息管理系统

    #!/usr/bin/python #coding=utf-8 import io import os import time FileRead = io.open('callingcard','r' ...

  8. 接口测试返回的json文件中字符串是乱序

    问题描述 接口测试中post方式匹配返回信息时显示不匹配, 但是statuscode明明是200, 而且用postman /restclient等工具测出来也是没问题的. 根本原因 封装了这么个方法来 ...

  9. User Profile Service服务未能登录,无法登录

    不知你是否遇到这样的问题,某一天你打开PC,开机正常,可当你输入正确的密码回车,却发现Vista或Win7拒绝让你登录,提示"User Profile Service 服务未能登录.无法加载 ...

  10. 【强连通分量】Bzoj1194 HNOI2006 潘多拉的盒子

    Description Sulotion 首先要对每对咒语机建图,判断机器a是否能生成所有机器b生成的 如果跑一个相同的串,最后结束的点b可输出a不可输出,判断就为否 大概就用这种思路,f[x][y] ...