chrome浏览器如何审查hover元素的css样式

Web前端 潘老师 1年前 (2021-08-13) 1039 ℃ (0) 扫码查看

做前端开发经常要审查元素的样式,而有些样式比如:hover这种只有鼠标悬停在上面才会有效果的元素,在使用浏览器审查时会发现找不到对应hover后的样式,下面潘老师教大家一个小技巧,快速使用chrome浏览器审查元素hover后的样式代码。

操作方法其实非常简单,首先还是F12快捷键打开chrome的审查工具,然后定位到具有hover效果的元素,比如我这里的版权声明元素,用如下几步即可实现审查,具体如图:
chrome浏览器如何审查hover元素的css样式
其中最主要的操作也就是要点击审查工具Styles中的:hov,然后勾选:hover即可,当前还支持其他冒号选择器,比如:active,:focus等等。

顺便提下,:hov右侧还有一个.cls可以让我们自行定义一个class样式,对应css样式调试也非常有帮助,用好chrome的审查元素工具,前端开发调试真是事半功倍!


版权声明:本站所有文章,如无特殊说明,均为本站原创。转载请务必注明文章来源,谢谢支持。
本文链接:https://www.panziye.com/java/web/3463.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】