很多小伙伴在开发的时候,大多是在用谷歌开发者工具调试代码(快捷键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. js术语扫盲贴:XHR、RegExp、call-apply、prototype

    (1) XHR:xml httprequestXHR注入:XHR 注入技术是通过XMLHttpRest来获取javascript的.但与eval不同的是,该机制是通过创建一个script的DOM元素, ...

  2. tkinter中scale拖拉改变值控件(十一)

    scale拖拉改变值控件 使用户通过拖拽改变值 简单的实现: import tkinter wuya = tkinter.Tk() wuya.title("wuya") wuya. ...

  3. 系列博文-Three.js入门指南(张雯莉)-照相机

    照相机就是这样一个抽象,它定义了三维空间到二维屏幕的投影方式,用“照相机”这样一个类比,可以使我们直观地理解这一投影方式.而针对投影方式的不同,照相机又分为正交投影照相机与透视投影照相机.我们需要为自 ...

  4. 超实用的JavaScript代码段 Item5 --图片滑动效果实现

    先上图 鼠标滑过那张图,显示完整的哪张图,移除则复位: 简单的CSS加JS操作DOM实现: <!doctype html> <html> <head> <me ...

  5. 判断qq号码 规律

    $qqs = array('2343232', "4323254","22222","5123123","23412341234& ...

  6. 【强连通分量】Bzoj1051 HAOI2006 受欢迎的牛

    Description 每一头牛的愿望就是变成一头最受欢迎的牛.现在有N头牛,给你M对整数(A,B),表示牛A认为牛B受欢迎. 这种关系是具有传递性的,如果A认为B受欢迎,B认为C受欢迎,那么牛A也认 ...

  7. BZOJ_[usaco2007 Nov]relays 奶牛接力跑_离散化+倍增弗洛伊德

    BZOJ_[usaco2007 Nov]relays 奶牛接力跑_离散化+倍增弗洛伊德 Description FJ的N(2 <= N <= 1,000,000)头奶牛选择了接力跑作为她们 ...

  8. Android--app性能问题的总结(一)

     一个应用程序的性能问题体现在很多方面,app的性能问题,很大程度上决定了使用app的用户量,如果正在使用app的过程中出现app崩溃.卡顿半天加载不出数据(跟网络也有一定的关系).用户请求事件半天获 ...

  9. 对于单页应用中如何监听 URL 变化的思考

    周末开发了一个在 GitHub 中给 repo 增加自定义备注的 chrome 扩展. 开发这个扩展的原因是我在 GitHub 中所 star 的项目实在太多了(截止目前 671 个),有的项目过个几 ...

  10. python接口自动化(二十四)--unittest断言——中(详解)

    简介 上一篇通过简单的案例给小伙伴们介绍了一下unittest断言,这篇我们将通过结合和围绕实际的工作来进行unittest的断言.这里以获取城市天气预报的接口为例,设计了 2 个用例,一个是查询北京 ...