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

Web前端 潘老师 2个月前 (08-13) 208 ℃ (0) 扫码查看

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

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

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


版权声明:本站所有文章,如无特殊说明,均为本站原创。全部下载资源版权归原作者所有。任何个人或组织,若未征得本站同意,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。若需转载请注明文章来源。
本文链接:chrome浏览器如何审查hover元素的css样式
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

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

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

您也可以 微信登录 来发表评论!