V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
dreamer
V2EX  ›  问与答

Chrome 开发者工具如何查看 :hover 样式?

  •  
  •   dreamer · 2012-11-05 11:13:37 +08:00 · 12476 次点击
    这是一个创建于 4190 天前的主题,其中的信息可能已经有所发展或是发生改变。
    在 Firefox 下使用 Firebug 查看某个元素的时候,如果该元素设置了 :hover 样式,那么鼠标移动上去之后,Firebug 就会自动给出元素的 :hover 样式 css 代码。

    但是在 Chrome 下用开发者工具的时候,当我查看某个元素,鼠标移动上去之后元素样式改变了,但是开发者工具里面没办法查看到当前样式的 css 代码,是不是 Chrome 开发者工具目前还不支持?
    7 条回复    1970-01-01 08:00:00 +08:00
    xlaok
        1
    xlaok  
       2012-11-05 11:15:47 +08:00
    记得前不久有人问过类似的

    选中元素后,在开发者工具右上角有个小箭头一样的东西,点击一下就能选:hover等等了
    skydiver
        2
    skydiver  
       2012-11-05 11:18:32 +08:00   ❤️ 1
    iuhoay
        3
    iuhoay  
       2012-11-05 11:19:47 +08:00
    zhy0216
        4
    zhy0216  
       2012-11-05 11:20:50 +08:00
    或者在弹出的html代码那里, 要hover的元素那里右键, 有个force element state, 选hover
    botao1
        5
    botao1  
       2012-11-05 12:01:16 +08:00
    @skydiver 请问Firebug有类似的功能么?
    dreamer
        6
    dreamer  
    OP
       2012-11-05 14:50:47 +08:00
    @skydiver
    @iuhoay
    @zhy0216

    多谢各位,了解了!
    xhslyf
        7
    xhslyf  
       2013-10-23 10:49:06 +08:00
    @skydiver
    @iuhoay

    这个每次都要手动去点,可以设置成类似 Firebug 那样“常驻”显示的吗?
    就是鼠标已经过某元素,他的 :hover 样式就会显示出来。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2472 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 01:21 · PVG 09:21 · LAX 18:21 · JFK 21:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.