chrome中如何查看元素的hover事件

一、总结

一句话总结:

Elements->Styles里面可以看到":hov":点开选择":hover"就可以看到元素hover时的样式了

二、chrome 开发者工具,查看元素 hover 样式

转自或参考:chrome 开发者工具,查看元素 hover 样式
https://www.cnblogs.com/similar/p/8496610.html

在web开发中,浏览器开发者工具是我们常用的调试工具。我们经常会有这样的需求,就是查看元素的时候需要查看它的hover样式。相信有很多小伙伴都遇到过这样的情形,始终选不中hover后的元素状态。其实在开发者工具中是有地方可以设置的。方法如下:

1. 打开开发者工具,选中一个元素,结果如下图:

2. 在上图中的 Filter 栏中点击 :hov 按钮,如下图:

3. 点击 :hov 按钮后会显示一系列状态的复选框,我们要查看 hover 状态下的样式,那么就将 :hover 复选框选中即可, 如下图:

酱,我们想要查看的 hover 样式出来了。其他状态也是一样的操作啦,勾选就行了 ~~~~

 

最新文章

  1. boostrap 模态框
  2. P4基函数
  3. C# 面试的“区别”
  4. 关于TortoiseSVN的一些知识
  5. [视频]物联网应用-ARM mbed-来至MultiTech Systems的解决方案
  6. C# 正则表达式 匹配IP地址
  7. [itint5]最大子矩阵和
  8. 加密你的SQLite
  9. poj-1782 Run Length Encoding
  10. CSS 布局Float 【0】
  11. hdu Joseph
  12. poj 1328 Radar Installation(贪心)
  13. Java编程思想笔记(第二章)
  14. 求最大公约数(GCD)的两种算法
  15. 【转】 CSS十问——好奇心+刨根问底=CSSer
  16. 登录功能(MD5加密)
  17. 关于ES7中的async/await在客户端和服务端上的实践
  18. Oracle命令行中显示:ORA-04076: 无效的 NEW 或 OLD 说明
  19. Vue PC后台系统组件大全
  20. linux 查看文件方法

热门文章

  1. python+requests模拟登陆 学校选课系统
  2. 今日js心得
  3. 【Java并发】线程通信
  4. shell脚本——sed命令
  5. PhpStorm添加PHP代码规范检查CodeSniffer(phpcs)和PHP代码静态分析工具Mess Detector(phpmd)
  6. Delphi Tobject类
  7. python并发编程之线程(二):死锁和递归锁&信号量&定时器&线程queue&事件evevt
  8. storm入门基本知识
  9. thymeleaf的内联th:inline(在javascript访问model中的数据)
  10. ubuntu卸载/更新Cmake