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

Posted similar

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了chrome 开发者工具,查看元素 hover 样式相关的知识,希望对你有一定的参考价值。

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

 

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

技术分享图片

 

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

技术分享图片

 

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

技术分享图片

 

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

以上是关于chrome 开发者工具,查看元素 hover 样式的主要内容,如果未能解决你的问题,请参考以下文章

在 Chrome 开发者工具中禁用 :hover 状态

chrome 开发者工具——前端实用功能总结

在 Chrome 开发者工具中检查 Javascript Hover

Chrome64基础 开发者工具 查看a标签处于:hover时的css代码

如何在 chrome 开发工具中同时查看元素选项卡和源选项卡

如何在 Chrome 开发工具或 Firefox 开发工具中查看 JS 正在改变我的元素的样式?