很多小伙伴在开发的时候，大多是在用谷歌开发者工具调试代码（快捷键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. 查找linux设备的uuid

    [root@ ~]# blkid /dev/vdc /dev/vdc: UUID="bxxxx-xxx-41b9-8146-7da8bd645b92" TYPE="ext ...

  2. Nagios安装、配置、问题记录

    http://youyizhimen.blog.163.com/blog/static/170917267201201745523276/ 本文描述了我在使用Nagios的过程中遇到的一些问题.解决办 ...

  3. 33.APP后端处理视频的方案

    在当前的app应用中,到处都能看到视频的身影,例如,在社交类的app上,用户可以拍摄属于自己的小视频,并发布到相应得栏目,增加和好友们互动的机会. 后台常见的视频处理有以下几种: ·          ...

  4. javascript快速入门之BOM模型—浏览器对象模型(Browser Object Model)

    什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对 ...

  5. Python集合set

    集合 set 集合是无序的 集合的值是唯一的 求两个集合的关系: list1 = [1,4,5,7,3,6,7,9] list2 = set([2,6,0,66,22,8,4]) list3 = se ...

  6. 关于Kafka日志留存策略的讨论

    关于Kafka日志留存(log retention)策略的介绍,网上已有很多文章.不过目前其策略已然发生了一些变化,故本文针对较新版本的Kafka做一次统一的讨论.如果没有显式说明,本文一律以Kafk ...

  7. bzoj 1189 紧急疏散 网络流

    二分答案,网络流判断 将每个门拆点,每个人连向每个门的dis~当前解 然后跑最大流,如果等于人数,即为可行解 #include<cstdio> #include<iostream&g ...

  8. CentOS7防火墙管理firewalld

    学习apache安装的时候需要打开80端口,由于centos 7版本以后默认使用firewalld后,网上关于iptables的设置方法已经不管用了,想着反正iptable也不太熟悉,索性直接搬官方文 ...

  9. 浅析Django之session与cookie

    浅析Django之session与cookie 1 session与cookie概述 原理: 由于HTTP协议是无状态,无连接的,当用户发起网路请求时,需要服务端能标识用户ID,用以存储用户相关信息, ...

  10. python 防止sql注入字符串拼接的正确用法

    在使用pymysql模块时,在使用字符串拼接的注意事项错误用法1 sql='select * from where id="%d" and name="%s" ...