鼠标悬停在元素上方后出现特殊样式，寻找样式或进行更改

最近更改一个鼠标悬停到元素上，该行就会自动变宽，变背景色的效果。

主要涉及的是chrome 浏览器的开发者工具的技巧。

1. 实现这种效果通常是 用的 hover 伪类。一般你点的时候，元素是这个样式，你鼠标挪回来，样式又变了，无法在elements中选中在Styles显示样式。可以使用以下方法：

选中对悬停在上面有特殊效果的元素，右键 Force State （强制某种状态），你强制为hover,则特殊的样式出现了，你可以选中特殊样式的元素，观看它的样式。图中是在个人博客页面，你悬停在某篇文章上时，它的opt-box ，‘编辑’，‘删除’的操作按钮就会显现。

2. 另一种情形，就是你鼠标移到元素上时，它会新增dom元素，当鼠标移出时，dom元素又删除了。这种情形下 hover状态触发不了事件，因为鼠标没有动么，鼠标动过去，自己又不能在看不到Styles中看它的样式了。

这种情况下，一般选中body 元素，

Break on | subtree modifications ,就是在dom 子树被更改时中断，相当于打个断点，这个断点在更改 dom时会触发，你然后鼠标移到元素上，sources就会进入断点，就可以在代码中观察具体是新增了哪个元素，并观察样式了。