做前端开发经常要审查元素的样式,而有些样式比如:hover这种只有鼠标悬停在上面才会有效果的元素,在使用浏览器审查时会发现找不到对应hover后的样式,下面潘老师教大家一个小技巧,快速使用chrome浏览器审查元素hover后的样式代码。
操作方法其实非常简单,首先还是F12快捷键打开chrome的审查工具,然后定位到具有hover效果的元素,比如我这里的版权声明元素,用如下几步即可实现审查,具体如图:

其中最主要的操作也就是要点击审查工具Styles中的:hov,然后勾选:hover即可,当前还支持其他冒号选择器,比如:active,:focus等等。
顺便提下,:hov右侧还有一个.cls可以让我们自行定义一个class样式,对应css样式调试也非常有帮助,用好chrome的审查元素工具,前端开发调试真是事半功倍!





