网页网站您现在的位置是:首页 > 博客日志 > 网页网站

使用Chrome开发者工具如何查看a标签处于:hover状态时的css样式代码

<a href='mailto:'>微wx笑</a>的头像微wx笑2019-09-11 10:41:02网页网站人已围观关键字:Chrome,谷歌浏览器,CSS,hover

简介相信很多人遇到过这样的问题,想看a标签处于:hover状态时的css样式,但是通过鼠标选择要查看的链接时并不会触发:hover状态,当选中了之后,鼠标再移动到选中的链接上,样式窗口的样式也不会跟着切换。你以为Chrome的开发者很弱智,其实人家早想到了,只是这功能你还不知道吧。

使用Chrome开发者工具如何查看a标签处于:hover状态时的css样式代码fws编程技术_踩坑日志_进阶指南 - 无知人生

相信很多人遇到过这样的问题,想看a标签处于:hover状态时的css样式,但是通过鼠标选择要查看的链接时并不会触发:hover状态,当选中了之后,鼠标再移动到选中的链接上,样式窗口的样式也不会跟着切换。你以为Chrome的开发者很弱智,其实人家早想到了,只是这功能你还不知道吧。fws编程技术_踩坑日志_进阶指南 - 无知人生


fws编程技术_踩坑日志_进阶指南 - 无知人生

那么怎么用?fws编程技术_踩坑日志_进阶指南 - 无知人生

看下图,其实很简单,是不是?fws编程技术_踩坑日志_进阶指南 - 无知人生

image.pngfws编程技术_踩坑日志_进阶指南 - 无知人生

注意,不只是a标签有:hover状态,有时候可能会这样定义样式:fws编程技术_踩坑日志_进阶指南 - 无知人生

.bloglist li:hover .blogtitle a { color: #337ab7; }

这个时候你只将a标签的Force State(强制状态)设置为:hover状态是没用的,fws编程技术_踩坑日志_进阶指南 - 无知人生

这时你需要将多个元素设置为:hover状态,然后再选中a标签,才能看到对应的:hover状态的css样式代码。fws编程技术_踩坑日志_进阶指南 - 无知人生

我刚把这个问题改了,就不返回去截图了。fws编程技术_踩坑日志_进阶指南 - 无知人生

image.pngfws编程技术_踩坑日志_进阶指南 - 无知人生

本文由 微wx笑 创作,采用 CC BY-NC 4.0 许可协议。 非商业性使用可自由转载、引用、甚至修改,但需署名作者且注明出处。

很赞哦! () 有话说 ()

点击排行

站点信息

  • 建站时间:2018-10-24
  • 服务期限阿里云ECS 2027年到期
  • 主题模板:基于《今夕何夕》修改
  • 文章统计:188篇
  • 文章评论:27条
  • 文章阅读:2117次
  • 文章点赞:874次
  • 微信公众号:扫描二维码,关注我们