Home Sign Up Sign In
dreamer
V2EX  ›  问与答

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

  •   
  •   dreamer · Nov 5, 2012 · 13660 views
    This topic created in 4954 days ago, the information mentioned may be changed or developed.
    在 Firefox 下使用 Firebug 查看某个元素的时候，如果该元素设置了 :hover 样式，那么鼠标移动上去之后，Firebug 就会自动给出元素的 :hover 样式 css 代码。

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

    选中元素后，在开发者工具右上角有个小箭头一样的东西，点击一下就能选：hover等等了
    skydiver
        2
    skydiver  
       Nov 5, 2012   ❤️ 1
    http://stackoverflow.com/questions/4515124/see-hover-state-in-chrome-developer-tools

    点右上角的按钮就可以了
    iuhoay
        3
    iuhoay  
       Nov 5, 2012
    zhy0216
        4
    zhy0216  
       Nov 5, 2012
    或者在弹出的html代码那里, 要hover的元素那里右键, 有个force element state, 选hover
    botao1
        5
    botao1  
       Nov 5, 2012
    @skydiver 请问Firebug有类似的功能么？
    dreamer
        6
    dreamer  
    OP
       Nov 5, 2012
    @skydiver
    @iuhoay
    @zhy0216

    多谢各位，了解了！
    YFZZ
        7
    YFZZ  
    PRO
       Oct 23, 2013
    @skydiver
    @iuhoay

    这个每次都要手动去点，可以设置成类似 Firebug 那样“常驻”显示的吗？
    就是鼠标已经过某元素，他的 :hover 样式就会显示出来。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   3509 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 39ms · UTC 00:08 · PVG 08:08 · LAX 17:08 · JFK 20:08
    ♥ Do have faith in what you're doing.