使用Chrome开发者工具如何查看a标签处于:hover状态时的css样式代码
微wx笑2019-09-11 10:41:02【网页网站】人已围观关键字:
Chrome 谷歌浏览器 CSS hover
相信很多人遇到过这样的问题,想看a标签处于:hover状态时的css样式,但是通过鼠标选择要查看的链接时并不会触发:hover状态,当选中了之后,鼠标再移动到选中的链接上,样式窗口的样式也不会跟着切换。你以为Chrome的开发者很弱智,其实人家早想到了,只是这功能你还不知道吧。
使用Chrome开发者工具如何查看a标签处于:hover状态时的css样式代码
相信很多人遇到过这样的问题,想看a标签处于:hover状态时的css样式,但是通过鼠标选择要查看的链接时并不会触发:hover状态,当选中了之后,鼠标再移动到选中的链接上,样式窗口的样式也不会跟着切换。你以为Chrome的开发者很弱智,其实人家早想到了,只是这功能你还不知道吧。
那么怎么用?
看下图,其实很简单,是不是?
注意,不只是a标签有:hover状态,有时候可能会这样定义样式:
.bloglist li:hover .blogtitle a { color: #337ab7; }
这个时候你只将a标签的Force State(强制状态)设置为:hover状态是没用的,
这时你需要将多个元素设置为:hover状态,然后再选中a标签,才能看到对应的:hover状态的css样式代码。
我刚把这个问题改了,就不返回去截图了。
本文由 微wx笑 创作,采用 CC BY-NC 4.0 许可协议。 非商业性使用可自由转载、引用、甚至修改,但需署名作者且注明出处。