做前端开发经常要审查元素的样式,而有些样式比如:hover
这种只有鼠标悬停在上面才会有效果的元素,在使用浏览器审查时会发现找不到对应hover
后的样式,下面潘老师教大家一个小技巧,快速使用chrome浏览器审查元素hover
后的样式代码。
操作方法其实非常简单,首先还是F12
快捷键打开chrome
的审查工具,然后定位到具有hover
效果的元素,比如我这里的版权声明
元素,用如下几步即可实现审查,具体如图:
其中最主要的操作也就是要点击审查工具Styles
中的:hov
,然后勾选:hover
即可,当前还支持其他冒号选择器,比如:active
,:focus
等等。
顺便提下,:hov
右侧还有一个.cls
可以让我们自行定义一个class
样式,对应css样式调试也非常有帮助,用好chrome的审查元素工具,前端开发调试真是事半功倍!