chrome谷歌开发者工具（hover时候的css样式怎么在浏览器调试）

　　

　　不少小伙伴在开发的时候，大可能是在用谷歌开发者工具调试代码（快捷键F12 或 Ctrl-Shift-i）。

　　可能会常常遇到须要调试hover样式的时候，通常都是直接改代码，而后在页面上刷新查看效果。

　　其实，这里有个小技巧，用谷歌开发者工具就能够方便的查看hover样式

 

　　方法一（鼠标右键想查看hover样式的元素，选择检查或审查元素。这样就能在截图右边看到hover效果的样式代码）

　　注：这里鼠标右键选择检查或审查元素后必定不要把鼠标移到开发者工具外，

　　　　要始终在开发者工具内。否则没法看到hover样式。

　　　　这时候开发者工具的显示方式建议为截图中的向下显示，

　　　　而且让开发者工具尽可能靠近要审查的元素，这样鼠标才不容易离开开发者工具

 

　　

　　方法二（推荐）

　　　　点击开发者工具右边:hov选项之后，会出现红色框的内容，而后把:hover选项勾上，这样就能看到审查元素的hover样式代码）

　　注：在开发者工具Elements面板找到该元素,右键该元素选择Force-state选项里面的hover选项，

　　　　也能查看hover样式代码。效果同方法二，此时该元素前面会有一个橘黄色的小圆圈